Image from http://islandmix.com/

For a new single page application we would like to have a quick start, no issues with modules to be installed and a modern template.

vue-cli (the comand line interface for quickly scaffolding a Vue project) already has a bunch of templates which you can easily install using vue init <template-name>. Our version is based on the well-known ‘webpack’ template. It comes with all modern goodies we like, such as a pre-configured webpack setup, Hot Module Reloading (HMR), ESLint integration and unit testing.

For our workflow, we added the Vuex module and created an extra route and page. In addition, we added the Bootstrap 3 stylesheet (minified) to the index.html for basic styling. This version is available on Bitbucket.

You can use this template in your project by following these steps. We assume you have a Bitbucket account, git installed on your local machine, node and npm available. As you can see, a modern setup on your machine is required 🙂

1. Clone the repo
   git clone pim_hooghiemstra@bitbucket.org:plintsites/vue-starter.git /your/project/directory
2. Remove the .git directory
   trash .git
3. Initialize your local git repo
   git init
4. Commit the initial version (after staging it)
   git add .
   git commit -m ‘Initial commit’
5. Install node modules
   npm install
6. Compile your code with webpack, HMR and open up the devserver
   npm run dev
7. Start developing.

Happy coding!