Vuejs code snippets

Copy and paste snippets for Vuejs

Registering a Vue component globally in a project:

Firstly import Vue file in main.js and also register and name the component fore the new Vue instance.

import Navbar from './components/navbar'
Vue.component('appNavbar', Navbar)

Note: the naming is camelcase and will be converted to:app-navbar

It is not necessary to export default{ name: 'NavBar' }

Set up Vuex store file

First install vuex in your project

npm install --save vuex

Next, create a folder called store and add a file called store.js in it. include it in your main.js and add it to your main new Vue instance.

import { store } from './store/store';
new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

Lastly, import Vue and Vuex in your store.js file, Vue.use(Vuex) and you can start adding your states, getters, mutations etc.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        counter: 0
    }
    // etc
});

The counter state can now be accesses in Vue files using:

this.$store.state.counter

Getters and other methods can easily be accessed with an ES2016 function (...). (In order to use this stage-2 has to be installed and set up in the Babel config file.)

import { mapMutations } from 'vuex';

export default {
    methods: {
        ...mapMutations([
            'increment',
            'decrement'
        ])
    }
}

Example mutation:

mutations: {
  increment: state => {
    state.counter++
}

When values have to be passed into the mutation, actions have to be used.