I always wanted to build something more tangible with VueJS and today we will start building a store with Vue using the Scotch tutorial by Chris Nwamba. This post on building a Store with Vue or perhaps series of posts will go through this tutorial and I will add things to it I bumped into and others may bump into getting the shop up and running.

Setup

The Shop will be using the following frontend components:

• Routing with Vue Router
• State Management with Vuex
• Data/API Interaction with HTTP Requests

It will have the following backend Components:

• Node: JavaScript on the server/backend. That’s basically what it is, but more powerful.
• Express: Routing framework for Node
• Mongoose Database schemas and models
• MongoDB: JSON database

VueJS Introduction

The initial blog post is on setting up basic data binding with v-model You can skip this really as Vue CLI will overwrite some of this. Also, we wrote about v-model already so no need to do this all over again.

Vue-CLI

This is followed up by setting up vue-cli using

npm install -g vue-cli

This will install vue cli globally as long as you have npm installed already. You can use Vue-CLI  to make it easier to set up a single page application. Doing it today after an upgrade with:

npm upgrade -g vue-cli

to version 2.9.2

jasper@~/webdesign/vue-basics/vue-shop $ vue --version
2.9.2

I realize Vue CLI has changed somewhat. There is an option to run npm once it is done installing the template chosen. You will also see there are some other list items that have changed. United testing does not mention package used for example. But nothing to really no longer be able to follow the tutorial.

jasper@~/webdesign/vue-basics/vue-shop $ vue init webpack .

 ? Generate project in current directory? Yes
 ? Project name vue-shop
 ? Project description VueJS Store
 ? Author Jasper Frumau <me@domain.com>
 ? Vue build standalone
 ? Install vue-router? Yes
 ? Use ESLint to lint your code? Yes
 ? Pick an ESLint preset Airbnb
 ? Set up unit tests No
 ? Setup e2e tests with Nightwatch? No
 ? Should we run `npm install` for you after the project has been created? (recom
 mended) npm

Once this setting up has run its course you will see that your directory has been filled up with loads of files to make your single page application run.

And you can run it in your browser using

npm run dev

And now at http://localhost:8080 you can see the app. Somehow the app did not open up automatically for me though. Will look into this. There are now also some more links to documentation to be seen you will not see in the Scotch tutorial: