Firstly I tested Angular, but when I tried Vue.js, it was love at the first sight. I like the freedom, it can be used similarly to jQuery only for some part of the page.
But, what about the single page application concept? It is dead simple in Vue.js to connect to the server, enable routing, and actually everything can be done in easy way.
What Is This Vue.js Tutorial About?
In this tutorial, simple blog app is created, where dummy data are loaded from fake online REST API. There is a list of all articles, after click, URL is changed and post detail is loaded.
Optionally, you can display comments with the button click.
Let’s see it in the action:
What Does Tutorial Cover?
It explains how to create single page application in Vue.js with help of a few 3rd party plugins, services and frameworks.
It doesn’t include publishing new posts and work with the forms. This is read-only app.
As I mentioned above, there is more than only plain Vue.js. I have used:
- Vue.js, version 2.5.11
- Vue CLI
- Webpack Simple Template as the base for tutorial (you are not limited to use this one)
- Vue-router to enable routing between different views
- Vue-paginate plugin to paginate list of articles
- Vue-resource plugin as HTTP client
- dummy data from fake REST API
- Twitter Bootstrap 4 for styling purposes, only CSS
Are You Ready To Go?
It is expected to have node.js and Vue CLI installed, then you can create new project by typing into your command line:
vue init webpack-simple vue-blog-app cd vue-blog-app npm install npm run dev
Finally, if new tab in your browser is opened (if not, try to type http://localhost:8080/ manually) and if you see the screen as below, you are ready to go!
Note: Next post is scheduled to be published on 19, March 2018.