2018-10-21         Frederic

VueJs + Webpack lazyload modules from ElementUI

I would like to lazy-load a specific element of ElementUI in a Vue component.I tried this:import { Tree } from /* webpackChunkName : "element-ui" */ 'element-ui';Vue.component(Tree.name, Tree);Vue.use(Tree);And this:{ components: { 'el-tree': () => import(/* webpackChunkName : "element-ui" */ "element-ui").then(({Tree}) => Tree) }}But in both cases, the element-ui.js chunk file is not created, and the full library is inserted into the main.js file instead.How do I dynamically import only the used elements of ElementUI (not the entire library)? Why does impor...

 vue.js                     1 answers                     97 view
 2018-10-21         Baird

Webpack Babel - Module build failed: TypeError: Cannot read property 'bindings' of nul

I'm building a new project in VUEJS 2 and am having a issue. I'm fairly new to webpack so I'm learning it as I go. Can you tell me why this section of code throws an error? ./store/modules/user/store.jsconst state = { user: {}};Then when it gets compiled, webpack throws these errors:ERROR Failed to compile with 1 errors 14:21:50 error in ./assets/js/store/modules/user/store.jsModule build failed: TypeError: Cannot read property 'bindings' of null at Scope.moveBindingTo (c:\myProject\node_module...

 vue.js                     1 answers                     21 view
 2018-10-21         Archibald

Vue cannot read property of undefined

<template> <f7-page> <f7-navbar> <f7-nav-left back-link="Zurück"></f7-nav-left> <f7-nav-title>{{groupDetails.data.group.name}}</f7-nav-title> <f7-nav-right></f7-nav-right> </f7-navbar> <f7-list> <f7-list-item>{{$f7route.params.groupKey}}</f7-list-item> <f7-list-item>{{groupDetails.data.owner.userID}}</f7-list-item> </f7-list> </f7-page></template><script>import * as firebase from 'firebase'export default { bef...

 vue.js                     1 answers                     14 view
 2018-10-21         Rae

directive on child of components

In this case the directive v-console is applied to the entire div of compo1.But would like to apply the directive only to the input. So the console.log should output the input field.what's the proper way to do it ?<div id="app"> <compo1 v-console>John</compo1></div>Vue.component('compo1', { template: '<div>Hello <slot></slot><input type="text" name="test" value="This is my value"></div>'});Vue.directive('console', { inserted: function (el) { console.log(el); }});var app = new Vue({ el: '#app'}); ...

 vue.js                     1 answers                     22 view
 2018-10-22         Katherine

get two datepicker input values using one mounted function with vue

I'm trying to get two input values using one mounted function for the date picker. But not getting how do I do that?Here is the code:HTML: <div id="app"><form v-on:submit.prevent="saveFleetJob"><input type="text" class="fleet-date" v-model="item.from"><input type="text" class="fleet-date" v-model="item.to"><button class="btn btn-primary">Click</button></form></div>Vue code:new Vue({ el: "#app", data: { item: { from:'', to:'' }, }, mounted() { $(".fleet-date").datepicker().o...

 vue.js                     1 answers                     24 view
 2018-10-22         Florence

vuetify transitions : how to set the transition speed

I have an Audioplayer component that I would like to be displayed slowmy sliding from the bottom a a parent componentI defined it inside , but how I can make it slidieng slwoly from the bottom . I cannot find any attributes to be defined fo the vuetify component ... <v-parallax src="img/hero.jpeg"> <v-layout column align-center justify-center> <img src="@/assets/images/logo.png" height="200"> <h1 class="mb-2 display-1 text-xs-center">HEADER 1</h1> <h2 class="mb-2 display-1 text-xs-center">HEADER 2</h2>...

 vue.js                     1 answers                     44 view
 2018-10-22         Saxon

Global error handling in vue js

I want to implement global error handlug in vue js like Error handling system in angular 2+.I tried so much but i could not find good approach for implementing this such Handling.if you are wondering now from my question let me describe more my question.imagine you have many service methods that these services method should run One after the other (i mean inside each other) so writing then and catch method inside the prevoius service is so ugly and unclean and now im looking for clean way for implementing such way.I hope you understand what I mean I hope i understood yo...

 vue.js                     2 answers                     42 view
 2018-10-22         Jason

VueJS add external site to router history

I am building an app using Vue Router that uses an "external" site for login credentials. It essentially looks like this:Home.Vue<template></template><script> export default { name: "Home", data() { return { } }, created() { window.location = 'https://third_party_site.com?nextpage=http://my_site.com/#/entry' } }</script><style scoped></style>This third_party_site.com handles auth and sends a JWT back as a query string in the resulting URL. When I try to use a navigation guard (as shown below) to get the q...

 vue.js                     1 answers                     86 view
 2018-10-22         Duncan

Proper way to include bootstrap 4 in a vuejs project

I use vue cli and want to use bootstrap 4. I installed the bootstrap npm package and imported the styles with @import '../node_modules/bootstrap/scss/bootstrap.scss'; in App.vue. But I can't get the javascript for modal and dropdown working. I tried to include these files in the index.html but it doesn't helped:<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd...

 vue.js                     1 answers                     79 view
 2018-10-22         Carey

vue.js bootstrap-vue dynamically change alert variant

So I'm using bootstrap-vue in a vue.js project, and this is the way you can display an alert acording to the docs:<b-alert variant="success" show>Success Alert</b-alert>What I'm trying to do is <b-alert variant=alertvariant show>Success Alert</b-alert>//...<script>export default { name: 'SetPOS', data() { return { alertvariant: "warning" } },...But this is not working, the alert is showing up withouth style. Is there any way I can use variables in the variant property of the alert, so I c...

 vue.js                     1 answers                     76 view
 2018-10-22         Mortimer

Close all dropdowns $root event

I have a special case in my UI where I need to close all opened b-bropdown components (including b-nav-item-dropdown).I haven't found how to do so in a similar way as b-tooltip offers.this.$root.$emit('bv::hide::tooltip');Something like this would be perfect:this.$root.$emit('bv::close::dropdown');At this point I can accept any hackish answer as long as it works as intended. Should I use mixins? If so, how to do that cleanly? The guys at bootstrap-vue offered an undocumented way to do the same with another event:this.$root.$emit('bv::link::clicked'); [XXX]

 vue.js                     1 answers                     77 view
 2018-10-22         Rodney

Vue stopPropagation not working - child to parent

I am struggling with events propagation. The task is to prevent clicking on anything alse, if the data is not saved. So, The left div contains a tree of options. After clicking on an item, a setting in the right div is showed. I want to warn the user, when he tries to click outside the settings div, that the data is not saved.The code looks like this: <div class="row"> <div class="col-sm-6"> <tree :data="treeData"> .. some tree data </tree> </div> <div class="col-sm-6"> ...

 vue.js                     1 answers                     91 view
 2018-10-22         Julian

how webpack builds vue.js project

My question is related to webpack. Let's say I'm using webpack and vue.js project. How does webpack build the project when I run the npm run build. I know that there's a build folder where config files have to be added and there'll be output folder dist which will save my final project. Question 1) WHat does webpack do? Does it search entry point in config file so that it knows where to start building process from? for vue.js it's src/main.js. AM I right?QUestion 2) when it finds main.js, what does it do? does it go from main.js to top so that to find all the dependencies ?...

 vue.js                     1 answers                     31 view
 2018-10-22         Jo

Vue 2 select2 custom template for label

I know I can change the template for the option slot, but can we do the same for the label slot? Like for option: <v-select inputId="originsId" :options="origins" label="city" placeholder="Search..."> <template slot="option" slot-scope="origin"> <div class="flex"> <div class="col"> <span>{{ origin.city }}</span> </div> <div class="col"> <span>{{ origin.country }}</span> </div> </div> </template> </v-select>Is there some way I ca...

 vue.js                     1 answers                     6 view
 2018-10-22         Diana

Vue.js application does not run on Gitlab pages

I built a Vue.js Vuex user interface. It works perfectly (on my laptop). I want to deploy it on Gitlab pages.I used the file described here (except that I upgraded the Node.js version):build site: image: node:10.8 stage: build script: - npm install --progress=false - npm run build artifacts: expire_in: 1 week paths: - distunit test: image: node:10.8 stage: test script: - npm install --progress=false - npm run unitdeploy: image: alpine stage: deploy script: - apk add --no-cache rsync openssh - mkdir -p ~/.ssh - echo "$SSH_PRIVATE_KEY...

 vue.js                     1 answers                     45 view
 2018-10-22         Heloise

Vue Cli 3 build custom directory for different type of files

I am new in using vue to build web app.By default, use npm run build, it will build the following structure:But I hope to build as follow:Then, how can I write the vue.config.js as output like what I want? Using this GitHub issue as an example, you should be able to achieve this by adding something like this to your configuration...// vue.config.jsmodule.exports = { chainWebpack: config => { config.module.rule('images').use('url-loader') .loader('file-loader') // replaces the url-loader .tap(options => Object.assign(options, { name: 'images/reg...

 vue.js                     1 answers                     27 view

Page 1 of 93  |  Show More Pages:  Top Prev Next Last