Hello friends. Today I will continue the series about Vuejs. Today I will guide you to create a basic application with the router
If you want to create a simple website with Vuejs and want to do it as quickly as possible. Then my example below will help you make a simple web quickly.
If you do not have Vue installed on your computer, install Vue via the terminal:
1 2 | npm install -g @vue/cli |
Then create your application:
1 2 | vue create name-of-your-app |
Now cd into the project directory. Then if you want to see information what you are doing. Let’s set up the server renderer :
1 2 | npm install vue vue-server-renderer — save |
And now you can enter yarn serve or npm run serve , and you will get a “Hello World” Vuejs page that provides useful links to the Vue document. Before you decide to delete only the “Hello World” component “and all HTML. I think you should save this HTML somewhere in case you might need to refer to it again.
Now install the Vue Router:
1 2 | npm install vue-router |
In your project, open main.js You will need to enter VueRouter as well as any components you may have that you need routers. You also need to add the Vue.use (VueRouter) line.
1 2 3 4 5 6 7 8 9 | import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' improt Home from './components/Home.vue' improt Bio from './components/Bio.vue' improt Contact from './components/Contact.vue' Vue.use(VueRouter) |
Now you need to add the router object for your application. Use this tool to map the router to the components you have imported. I recommend adding mode :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const router = new VueRouter({ model: 'history', routers: [ { path: '/', component: Home }, { path: '/', component: Bio }, { path: '/', component: Contact } ] }) |
And then add the router to Vue’s example:
1 2 3 4 5 | new Vue({ router, render: h => h(app) }).$mount('#app') |
Now switch to the App.vue file. Inside your template, inside the <div> tag add a router-view with your components inside
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> router-view</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Home</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Bio</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Contact</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> router-view</span> <span class="token punctuation">></span></span> |
Also make sure that all the components you import must be included here. In this template I will also place a <Nav/> tag. In my Nav.vue file, I add the router link tags to Now I can switch between different components.
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> nav</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> router-link</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> nav-item <span class="token punctuation">"</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> / <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Home <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> router-link</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> router-link</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> nav-item <span class="token punctuation">"</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> /bio <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> About <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> router-link</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> router-link</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> nav-item <span class="token punctuation">"</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> /contact <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Contact <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> router-link</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> nav</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
This may not be a complex dynamic web application, but it will get you started with being able to build a basic web site with routers with Vue. If you have any questions please leave a comment. below.