Setup Custom Route file in vue js 3

14-Sep-2024

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

S.no	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 : Copy

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 : Copy

import './assets/main.css'

import { createApp } from 'vue'

import App from './App.vue'

import router from './router/route.js'

const app = createApp(App)

app.use(router)

app.mount('#app')

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

import { RouterLink, RouterView } from 'vue-router'

</script>

</template>

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;

}

</style>

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 ,,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.