Setting up the Vue project

Let’s start by installing vue-cli with a fresh VueJS project. As mentioned earlier, this chapter uses the webpack-simple template with “bulma-dashboard” as the name of the project.

The directory structure should look similiar to this:

• bulma-dashboard [project name folder]
  • node_modules/
  • src/
    • assets/
    • App.vue
    • main.js
  • index.html
  • package.json
  • README.md
  • webpack.config.js

Preparing pages

Before continuing with implementing vue-router you should set up skeletons for all of your components. Create a new pages/ directory inside the src/ folder. Next, create .vue files for the components: Dashboard.vue, Books.vue, Orders.vue, and Login.vue. Your text editor of choice might be able to create .vue files already, but if not, here’s a little snippet for what the every .vue file should include:

<template>

</template>

<script>
  export default {
    name: [ INSERT NAME OF COMPONENT ]
  }
</script>

<style>...