DEV Community: Ibz786

Using Redis with Nuxt on Windows

Ibz786 — Wed, 13 Aug 2025 00:23:46 +0000

This is more a self documentation post as I ran into some issues trying to get Redis to work on Windows using Docker

Recently I've been messing around with Nuxt. As a fan of Vue.js and its ecosystem, I've found Nuxt to be an incredibly intuitive framework. There have been some "pain points" but thankfully overcome quite easily

Currently, when messing around with a few concepts, I came to the conclusion that I need to store some data on the server, that could essentially be cached and accessed quickly, without having to constantly hit the DB and do various joins etc.

Nuxt "out of the box" offers standard memory storage on the server side, but with the option to use other means or storage drivers. One of which, being redis

Since I'm using Windows, there's no official driver or way to install and use Redis. However, I came across one solution, Docker. Admittingly, I've heard of Docker, but have never in fact used it... up until this point. So I went ahead on the Docker website, got the Windows installer and installed it

You can install Docker for Windows here: https://docs.docker.com/desktop/setup/install/windows-install/

It's also important to note, that you should also have WSL (Windows Subsystem for Linux) installed. If you don't have it installed you can run the following:

wsl --install

Otherwise if you do, it would be best to update it just in case, using:

wsl --update

Once docker is installed, install redis by running the following command. This should get the latest version:

docker pull redis

Afterwards your ready to start up redis in your docker container. Run the following command:

docker run -p 6379:6379 --name redis1 -d redis

Its important to ensure that 6379:6379 is specificed as this part of the command exposes the docker container port to your local machine (something that I had missed earlier and was going in circles trying to figure out what went wrong)

Also redis1 in this case is the container or image name, and you can name yours anything you wish

This should kick start your Docker Redis container. You can check your containers using the following command:

docker ps

After which you can access your redis container via

docker exec -it redis1 redis-cli

It should show up as 127.0.0.1:6379. You can test if its working by running

ping

And you'll get PONG back

Now to integrate it with Nuxt, simply add redis to your Nuxt app, via

npm i ioredis

And following the Nuxt documentation, I added the config to my Nuxt config
https://nuxt.com/docs/4.x/guide/directory-structure/server#server-storage

export default defineNuxtConfig({
  nitro: {
    storage: {
      redis: {
        driver: 'redis',
        port: 6379,
        host: "127.0.0.1",
      }
    }
  }
})

In your API handler or other logic file, you can run the following

export default defineEventHandler(async (event) => {
  // List all keys with
  const keys = await useStorage('redis').getKeys();

  // Set a key with
  await useStorage('redis').setItem('foo', 'bar');

  // Get a key with
  await useStorage('redis').getItem('foo');

  // Remove a key with
  await useStorage('redis').removeItem('foo');

  return {}
});

And viola! Hope that helps anyone else facing similar issues

Adding routing to a Vue-Vite Chrome Extension

Ibz786 — Wed, 15 Jun 2022 19:26:24 +0000

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

Creating a Vue-Vite Chrome Extension

Ibz786 — Tue, 31 May 2022 21:02:00 +0000

My first post on dev.to and its inspiration is based on @jacksteamdev's post on creating a Create a Vite-React Chrome Extension in 90 seconds the author of the CRXJS Vite Plugin

I initially tried to create a Vite-Vue based Chrome Extension using the guidelines presented in his post and everything was going great, however, when running: npm run dev, it didn't run correctly and I was getting the error:
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

I messaged @jacksteamdev and he kindly offered support and gave the following examples:

After inspecting my code and setup I cleaned up some stuff and managed to get the extension working fine in Chrome.

I've included the steps to help get everyone started:

Create Project

Firstly, using Vite, create your project by following the prompts:

npm init vite@latest

Install CRXJS Vite Plugin

Then install the crxjs vite plugin using:

npm i @crxjs/vite-plugin -D

Update the Vite Config

Setup the vite.config.js file as the following:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
    plugins: [vue(), crx({manifest})],
    // ...
});

Create Manifest file

Setup the manifest.json file as the following:

{
    "manifest_version": 3,
    "name": "Vue Vite Chrome Extension Example",
    "version": "1.0.0",
    "action": {
        "default_title": "Vue Vite",
        "default_popup": "index.html"
    },
    "description": "Vue Vite Chrome Extension made with 'crxjs': https://github.com/crxjs/chrome-extension-tools",
    "options_page": "index.html"
}

Compile and Hot-Reload for Development

npm run dev

Adding the Extension to Chrome

Add the extension to Chrome via the path: chrome://extensions/

or by going to: Menu > Settings > Extensions

Ensure that "Developer mode" is enabled

Click "Load unpacked" Add the dist folder and voila!

Again, all credit to @jacksteamdev and his CRXJS Vite Plugin. Check out his Github page and give him a ⭐

Check out my Github Vue Vite Chrome Extension template