{ Vue Coding }

After learning the workflow for React with centralized state management (Redux), I found Vue.js to be a really fun way to work in JavaScript. The official documentation covers a lot, but IMO it doesn’t go into enough detail about how any serious projects will be built – with “Single-File Components“.

If you have a decent amount of JavaScript experience, you’ll want to use the Vue CLI.

I like to setup my main "entry file" or what defaults to main.js in the CLI like this:

import Vue from 'vue';
import AppLayout from './theme/AppLayout.vue';
import router from './router'; // assuming index.js in router directory using vue-router
import store from './store'; // assuming index.js in store directory using vuex

new Vue({
  router,
  ...AppLayout,
  store
}).$mount('#app');

This is used in lieu of what you’ll see throughout most of the docs:

new Vue({
  el: '#app',
  data: {}
});

We mount the Vue instance using … $mount(‘#app’) and can pass in objects that we want to be available globally throughout our project files. It’s common practice to include the router and a store instance (ignore if you’re not yet using Vuex). I use AppLayout as my base single file component¬†so I’m working in the AppLayout component’s namespace.

Examples for each of the imported components are coming soon.