How to clear state in vuex store?

I have just found the great solution that works for me. const getDefaultState = () => { return { items: [], status: ’empty’ } } // initial state const state = getDefaultState() const actions = { resetCartState ({ commit }) { commit(‘resetState’) }, addItem ({ state, commit }, item) { /* … */ } } … Read more

How to import and use image in a Vue single file component?

As simple as: <template> <div id=”app”> <img src=”./assets/logo.png”> </div> </template> <script> export default { } </script> <style lang=”css”> </style> Taken from the project generated by vue cli. If you want to use your image as a module, do not forget to bind data to your Vuejs component: <template> <div id=”app”> <img :src=”image”/> </div> </template> <script> … Read more

How to change page titles when using vue-router?

You can use a navigation guard with the router definition: import Vue from ‘vue’; const DEFAULT_TITLE = ‘Some Default Title’; router.afterEach((to, from) => { // Use next tick to handle router history correctly // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609 Vue.nextTick(() => { document.title = to.meta.title || DEFAULT_TITLE; }); }); You’ll need to change your export to: const router … Read more

did you register the component correctly? For recursive components, make sure to provide the “name” option

If you’re using a component within a component (e.g. something like this in the Vue DOM): App MyComponent ADifferentComponent MyComponent Here the issue is that MyComponent is both the parent and child of itself. This throws Vue into a loop, with each component depending on the other. There’s a few solutions to this:  1. Globally … Read more

How do I format currencies in a Vue component?

I have created a filter. The filter can be used in any page. Vue.filter(‘toCurrency’, function (value) { if (typeof value !== “number”) { return value; } var formatter = new Intl.NumberFormat(‘en-US’, { style: ‘currency’, currency: ‘USD’ }); return formatter.format(value); }); Then I can use this filter like this: <td class=”text-right”> {{ invoice.fees | toCurrency }} … Read more

How to get the v-for index in Vue.js?

Declare an index variable: <div v-for=”(item, index) in items” :key=”item.name”> </div> Demo: new Vue({ el: ‘#app’, data: { items: [{name: ‘a’}, {name: ‘b’}] } }) <script src=”https://unpkg.com/vue”></script> <div id=”app”> <div v-for=”(item, index) in items” :key=”item.name”> {{ index }}: {{ item.name }} </div> </div> Official docs section – Mapping an Array to Elements with v-for (emphasis … Read more