Vue.js Project setup with vue-cli, Bulma, vue-resource, vue-router

This tutorial covers how to create a new Vue project from scratch:

  • Creating project with vue-cli
  • Project structure
  • Adding Bulma for layout
  • Setting up the vue-router
  • Setting up vue-resource

The easiest way to get up and running with Vue is via the vue-cli.

In this tutorial the webpack template is used.

You will learn more about the Project Structure of the new project created via vue-cli, how to add Bulma, and the next part, will cover how to setup auth0 with this project and provide client side security. Bulma is a css framework that I have been using lately, it is very light weight and does not have any JS associated with it directly

To make calls using the vue-resource, a mock backend is utilized, Mocky.

You can find the code here.