Adding routing to a Vue-Vite Chrome Extension

Carrying on from my previous post on creating a Vue-Vite Chrome Extension 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

npm install vue-router@4

Add views to your app

Create a views folder to store all your Vues... 👀🤣

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

Inside your router/index.js file, add the following:

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

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

<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

Clicking on the About or Contact links will change the view appropriately
About

Contact

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

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

All code is on my GitHub repo