Problems when running with /pages directory

[obulat]

When the Nuxt app has a non-empty pages directory, you get the following errors in the console:

vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/iframe.html?id=features-custom-components--custom-template&viewMode=story"
warn @ vue-router.mjs:35
nuxt.js:122 [nuxt] error caught during app initialization Error: Page not found: /iframe.html?id=features-custom-components--custom-template&viewMode=story
    at createError (index.mjs:78:15)
    at router.js:109:29
    at fn (nuxt.js:214:44)
    at Object.runWithContext (runtime-core.esm-bundler.js:2696:18)
    at callWithNuxt (nuxt.js:220:24)
    at nuxt.js:37:41
    at EffectScope.run (reactivity.esm-bundler.js:43:16)
    at Object.runWithContext (nuxt.js:37:31)
    at router.js:109:25
    at vue-router.mjs:3432:52

To reproduce, run example:showcase:dev and go to "http://localhost:6006/?path=/story/features-custom-components--custom-template". You should see this error message displayed twice in the console.

Nuxt only adds the app/router plugin when there are no pages:

https://github.com/nuxt/nuxt/blob/3b907c1c6aa623e88125d731fd267e6a9a89abba/packages/nuxt/src/pages/module.ts#L121-L122

[tobiasdiez]

@chakAs3 Could you please explain how the custom router setup in the storybook addon works?

In particular, why do we need to:

• provide our own router:

  storybook/packages/storybook-addon/src/runtime/composables/router.ts

  Lines 4 to 7 in 729b372

  	export function useRouter() {
  	const router = useNuxtApp()?.$router ?? useVueRouter()
  	return router
  	}

• provide our own nuxt-link: https://github.com/nuxt-modules/storybook/blob/729b372abc4e6e6ab88321cc734fc759d9cfade2/packages/storybook-addon/src/runtime/components/nuxt-link.ts
• need to add the iframe page:

  storybook/packages/storybook-addon/src/preset.ts

  Lines 104 to 110 in 729b372

  	// Add iframe page
  	extendPages((pages) => {
  	pages.push({
  	name: 'storybook-iframe',
  	path: '/iframe.html',
  	})
  	})