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',
  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';


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

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


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: {

Example mutation:

mutations: {
  increment: state => {

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