Adding routing to a Vue-Vite Chrome Extension
Tags: vue, vite, tutorial, webdev
Published: 2022-06-15 19:26:24

Carrying on from my previous post on creating a [Vue-Vite Chrome Extension](https://dev.to/ibz786/create-a-vite-vue-chrome-extension-h3b) a great feature to add that adds a rich web-app experience to the Chrome Extension is routing, which is practically part of the bread and butter of the overall Vue ecosystem

# Getting Set Up
Simply follow the steps in my previous post if you haven't already got a Vue-Vite Chrome Extension working as of yet.

> For an **easy** way to get set up with Vue, Vite and Vue-Router simply use `npm init vue@latest`
This command will install and execute create-vue, which is the official Vue project scaffolding tool. You will be presented with prompts for a number of optional features including adding Vue-Router from the get go. I would personally recommend this and then bolting on the CRXJS Plugin afterwards, or feel free to follow the steps below

# Install Vue Router
Install `vue-router` 
```ssh
npm install vue-router@4
```
# Add views to your app
Create a `views` folder to store all your Vues... 👀🤣
![IDE Views Folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lnaz7llfana3o4omi04.png)
 

# Add router to your app
## Add router folder
In the /src folder, created a `router` folder and then a file called `index.js` as such ![IDE Router Folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhs5vw5zdg5sh63mm2tf.png)

Inside your `router/index.js` file, add the following: 
```js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  	history: createWebHistory(import.meta.env.BASE_URL),
  	routes: [
		{
			path: '/',
			name: 'home',
			component: HomeView
		},
		{
			path: '/about',
			name: 'about',
			// route level code-splitting
			// this generates a separate chunk (About.[hash].js) for this route
			// which is lazy-loaded when the route is visited.
			component: () => import('../views/AboutView.vue')
		},
        {
			path: '/contact',
			name: 'contact',
			component: () => import('../views/ContactView.vue')
		}
  	]
});

// Redirects route from index.html to '/' when initially load Extension
router.beforeEach((to) => {
    if(to.path === "/index.html") return '/';
});
export default router;
```

## Update your main.js
In your `main.js` update it to include your router
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router).mount('#app');
```

## Update your App.vue
The final step is to update your `App.vue` to include the RouterLink and RouterView
```js
<script setup>
	import { RouterLink, RouterView } from 'vue-router'
	import HelloWorld from '@/components/HelloWorld.vue'
</script>

<template>
  	<header>
    	<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    	<div class="wrapper">
      		<HelloWorld msg="You did it!" />

      		<nav>
        		<RouterLink to="/">Home</RouterLink>
        		<RouterLink to="/about">About</RouterLink>
        		<RouterLink to="/contact">Contact</RouterLink>
      		</nav>
    	</div>
  	</header>
  	<RouterView />
</template>
```

... and done! You're good to go with simple routing added to your Vue Chrome Extension.

If you installed Vue using `npm init vue@latest` your initial or Home view should look something like this

![Chrome Extension Home View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cuv00ksa8qos4dleqqm.png)
 
Clicking on the About or Contact links will change the view appropriately
**About**
![Chrome Extension About View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv52y60vph6ig2w04hkt.png)

**Contact** 
![Chrome Extension Contact View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrxs0wwm73ri2wbbl0z0.png)

When viewing either the options or popup view, Chrome will always try and load in /index.html into the URL. The snippet in `router/index.js`
```js
router.beforeEach((to) => {
    if(to.path === "/index.html") return '/';
});
```
helps ensure that on initial load, if the route is in fact `index.html` to defer to the root page, in this case the 'HomeView'

All credit to @jacksteamdev and his [CRXJS Plugin](https://github.com/crxjs/rollup-plugin-chrome-extension) 

All code is on my [GitHub repo](https://github.com/Ibz786/vue-vite-chrome-extension-template)