I'm trying to make PWA with my vue 3 project but something is not going good. Here is my code:

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/_variables.scss";`,
      },
    },
  },
  pwa: {
    name: "vue-petinder",
    themeColor: "#4DBA87",
    msTileColor: "#4DBA87",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",

    // configure the workbox plugin
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      //wSrc is required in InjectManifest mode.
      swSrc: "/src/registerServiceWorker.js",
      // ...other Workbox options...
    },
  },
};

registerServiceWorker.js

import { register } from "register-service-worker";

if (process.env.NODE_ENV === "production") {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        "App is being served from cache by a service worker.\n" +
          "For more details, visit https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
      );
    },
    registered() {
      console.log("Service worker has been registered.");
    },
    cached() {
      console.log("Content has been cached for offline use.");
    },
    updatefound() {
      console.log("New content is downloading.");
    },
    updated() {
      console.log("New content is available; please refresh.");
    },
    offline() {
      console.log(
        "No internet connection found. App is running in offline mode."
      );
    },
    error(error) {
      console.error("Error during service worker registration:", error);
    },
  });
}

I'm trying to see the service-worker messages in the console but is not working. What am I doing wrong?