Setup Custom Route file in vue js 3

Setup Custom Route file in vue js 3

| |
Image Carousel

Hello developers in this tutorial we will discuss about how to setup custom route js file in vue js 

Table of Contents Contents-topics
1 What is route js file
2 Installing package 
3 Create and setup new route js file
4 Run the project

1:What is route js file

In every backend and frontend technology for all type of applications(web and mobile) we need certain route file to manage all the routes of the application through out the application . So in every route file we used to manage urls of our applications.

2:Installing package

For installing router js package copy the below command in the terminal 
Code for router package:Copy

npm i vue-router@next 

This will install router package into your vue project 

3:Create and setup new route js file

As we install the router packages now we will create a new file src/router/route.js and import the vue-router packages
code for route.js : 

import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
      path: '/',
      name: 'App',
      component: App
export default router

 in src/main.js
code for main.js : 


import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/route.js'
const app = createApp(App)

In src/App.vue 
code for main.js : 

<script >
import { RouterLink, RouterView } from 'vue-router'

  <RouterView />
<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
.logo {
  display: block;
  margin: 0 auto 2rem;
nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
nav a.router-link-exact-active {
  color: var(--color-text);
nav a.router-link-exact-active:hover {
  background-color: transparent;
nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
nav a:first-of-type {
  border: 0;
@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  .logo {
    margin: 0 2rem 0 0;
  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;
    padding: 1rem 0;
    margin-top: 1rem;

4:Run the project

To check and run the project simply hit npm run dev on the cmd 

Tags: create custom route file in vue js , create custom route file in vue js 3 , setup route file in vue js 3,Front-end development , vue js tutorial , vue js 3 , vue js 3 tutorial ,,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More