Extending pages

Adding localized pages from a module.

This is a workaround, support for extending pages with localization regardless of module registration order may be added in the future.
Your module has to registered before @nuxtjs/i18n to ensure localized routes are generated for the added pages.

If you're a module author and want your module to add extra pages to your project, you can add these by using the pages:extend Nuxt hook.

nuxt.config.ts
import ExampleModule from './modules/example-module'

export default defineNuxtConfig({
  modules: [
    ExampleModule, // Register module before `@nuxtjs/i18n`
    '@nuxtjs/i18n',
  ],
})
modules/example-module/index.ts
import { defineNuxtModule, resolve } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url);
  
    nuxt.hook('pages:extend', (pages) => {
      pages.push({
        name: 'example-page',
        path: '/example-page',
        file: resolve(__dirname, './pages/example-page.vue'),
      });
    });
  }
})
Edit this page on GitHub