Vue.js Tutorial: How to Create Blog as Single Page Application with Vue.js? PREVIEW

This is the preview part of the Vue.js tutorial where you find, how to build a blog as a single page application with the help of progressive JavaScript framework Vue.js.

I have been strong jQuery user for almost each JavaScript task, but because of its limitations and with the boom of React and Angular, I have started to look for my way.

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.

I am going to use the single file components approach, if you haven’t used it yet, check the documentation for more information.

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.

Technical Parameters

As I mentioned above, there is more than only plain Vue.js. I have used:

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.