There is no way to use a different router

[ieshan]

Environment

Nuxt CLI v3.0.0-27398184.5d7f99b 20:47:58 RootDir: /home/user/js/nuxt3-app 20:47:59 Nuxt project info: 20:47:59

---

• Operating System: Linux
• Node Version: v14.16.0
• Nuxt Version: 3.0.0-27398184.5d7f99b
• Package Manager: [email protected]
• Bundler: Vite
• User Config: srcDir, buildModules, ssr
• Runtime Modules: -
• Build Modules: ~/modules/ionic/index.js

---

Reproduction

Make ssr: false in nuxt.config.js

Create a plugin like this

import {createRouter, createWebHistory} from "@ionic/vue-router";
import routes from '#build/routes'

export default defineNuxtPlugin((nuxtApp) => {
    const router = createRouter({
        history: createWebHistory("/"),
        routes,
    });
    nuxtApp.vueApp.use(router);
});

The package.json file

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@ionic/vue": "^6.0.5",
    "@ionic/vue-router": "^6.0.5"
  },
  "devDependencies": {
    "@nuxtjs/router": "^1.7.0",
    "@types/jest": "^27.4.0",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^5.10.2",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/vue3-jest": "^27.0.0-alpha.4",
    "babel-jest": "^27.4.6",
    "cypress": "^9.4.1",
    "eslint": "^8.8.0",
    "eslint-plugin-vue": "^8.4.0",
    "jest": "^27.4.7",
    "nuxt3": "latest",
    "ts-jest": "^27.1.3",
    "typescript": "^4.5.5"
  }
}

Describe the bug

With the current implementation there is no way to replace the usage of default vue router. I was trying to use ionic with nuxt 3, couldn't do it using the router-module. I was getting the following error.

[plugin:vite:import-analysis] Failed to resolve import "../src/router.js" from "virtual:/home/eshan/work/js/nuxt3-app/.nuxt/router.js". Does the file exist?
virtual:[/home/user/js/nuxt3-app/.nuxt/router.js:1:53]()
1  |  import { createRouter as customCreateRouter } from '../src/router.js'
   |                                                      ^
2  |  
3  |

Then I tried to make it as plugin, but I am getting the following error:

bootstrap.mjs:39 Error while mounting app: TypeError: Cannot set property $router of #<Object> which has only a getter
    at Object.install (vue-router.esm-bundler.js:3361:41)
    at Object.router.install (index.js:14:9)
    at Object.use (runtime-core.esm-bundler.js:3809:28)
    at router.js:18:17
    at callWithNuxt (nuxt.mjs:91:20)
    at applyPlugin (nuxt.mjs:48:29)
    at applyPlugins (nuxt.mjs:57:11)
    at async initApp (bootstrap.mjs:28:5)

Additional context

No response

Logs

No response

[fallsimply]

Nuxt is a web framework not a mobile framework.

Ionic projects can be generated by following the Starting an App guide from the Ionic Vue docs

Good luck with your project!

[ieshan]

@fallsimply thank you so much for your response. I would just add to your response, ionic is a cross platform framework not only just mobile. Also it’s completely based on web technologies.

Although I am trying to use nuxt with ionic where it uses createRouter() from ionic, but there is a strong probability of the same issue happening in cases. I feel there should be an easy way to replace default router initialisation

[GGwujun]

Why would you replace the usage of default vue router

[danielroe]

related: https://github.com/nuxt/nuxt.js/issues/13322.

Also see https://github.com/nuxt-community/router-module (which will need to be migrated to support nuxt 3).

[danielroe]

We now have the ability to customise all the options to createRouter via https://github.com/nuxt/framework/pull/3485 and https://github.com/nuxt/framework/pull/7129. Allowing an entirely separate router to be provided is not a good idea, I think, because it would need to have the same API as vue-router.

It might be worth checking out https://github.com/danielroe/nuxt-ionic.