Creating a Basic Vue.js App With Router

So you want to make a simple website with Vue and want to do it as quickly as possible? Here is a guide I have made to be able to do it quickly. As I come from a React background, I have tried to also make this guide as friendly as possible to those who are expecting Vue to behave like React.

If you don’t have Vue installed on your computer, install Vue via terminal:

npm install -g @vue/cli

Then create your app:

vue create name-of-your-app

Now you can cd inside your project. After that, you’re going to want to be able to see what you are doing so also install the server renderer:

npm install vue vue-server-renderer — save

Now you can type in “yarn serve” or “npm run serve” and you will get a Vue “Hello World” page that provides useful links to Vue documentation. Before you decide to just delete the Hello World component and all it’s HTML, I recommend you hang onto it a bit or at least open some of the links in case you need to refer to it.

Now install Vue Router:

npm install vue-router

Inside your project, open up main.js. You will need to import VueRouter as well as any components you may have that you need routes for. You also need to add the line Vue.use(VueRouter).