Optional param in vuejs router
Just adding a question mark ? will make it optional. { path: ‘/offers/:member?’, … }, It works for Vue Router 2.0 onward. Source: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122
vue.js
Using Environment Variables with Vue.js
Vue.js with Webpack If you use vue cli with the Webpack template (default config), you can create and add your environment variables to a .env file. The variables will automatically be accessible under process.env.variableName in your project. Loaded variables are also available to all vue-cli-service commands, plugins and dependencies. You have a few options, this … Read more
Default values for Vue component props & how to check if a user did not set the prop?
Vue allows for you to specify a default prop value and type directly, by making props an object (see: https://vuejs.org/guide/components.html#Prop-Validation): props: { year: { default: 2016, type: Number } } If the wrong type is passed then it throws an error and logs it in the console, here’s the fiddle: https://jsfiddle.net/cexbqe2q/
Detect click outside element
There is the solution I used, which is based on Linus Borg answer and works fine with vue.js 2.0. Vue.directive(‘click-outside’, { bind: function (el, binding, vnode) { el.clickOutsideEvent = function (event) { // here I check that click was outside the el and his children if (!(el == event.target || el.contains(event.target))) { // and if … Read more
How do I hide the VueJS syntax while the page is loading?
You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS. HTML: <div v-cloak>{{ message }}</div> CSS: [v-cloak] { display: none; }
How to change port number in vue-cli project
If you’re using vue-cli 3.x, you can simply pass the port to the npm command like so: npm run serve — –port 3000 Then visit http://localhost:3000/
Vue ‘export default’ vs ‘new Vue’
When you declare: new Vue({ el: ‘#app’, data () { return {} } )} That is typically your root Vue instance that the rest of the application descends from. This hangs off the root element declared in an html document, for example: <html> … <body> <div id=”app”></div> </body> </html> The other syntax is declaring a … Read more
[Vue warn]: Cannot find element
I think the problem is your script is executed before the target dom element is loaded in the dom… one reason could be that you have placed your script in the head of the page or in a script tag that is placed before the div element #main. So when the script is executed it … Read more
How to set URL query params in Vue with Vue-Router
Here is the example in docs: // with query, resulting in /register?plan=private router.push({ path: ‘register’, query: { plan: ‘private’ }}) Ref: https://router.vuejs.org/en/essentials/navigation.html As mentioned in those docs, router.replace works like router.push So, you seem to have it right in your sample code in question. But I think you may need to include either name or … Read more
Vuex – passing multiple parameters to mutation
Mutations expect two arguments: state and payload, where the current state of the store is passed by Vuex itself as the first argument and the second argument holds any parameters you need to pass. The easiest way to pass a number of parameters is to destruct them: mutations: { authenticate(state, { token, expiration }) { … Read more