What problem does this feature solve?

It was working, now it's not working

Thanks for bringing this module back to life @ricardogobbosouza !
It would be nice to have an up-to-date CHANGELOG.md to keep a track on the releases. Since standard-version is already in the project's dependencies, let's use it!

What problem does this feature solve?

Currently after you do a build and deploy to a server, you have to include /router.js even though it ISN'T EVEN USED!
It would be nice to wrap most of this module in a build hook since that's all it's really dealing with anyway.

Version

v1.1.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

1. Have a nuxt 2.x project
2. install router-module and enable keepDefaultRouter option
3. try to run app
4. error: Cannot find module 'nuxt/lib/app/router'

What is expected ?

App should start up normally.

What is actually happening?

Error: Cannot find module 'nuxt/lib/app/router'

how to use extendRoutes
inside a custom nuxt module
using router-module?

What problem does this feature solve?

By default, nuxt creates the URL from the pages folder, for example :

/pages/blog/index.vue = mywebsite.com/blog
/pages/blog/posts/index.vue = mywebsite.com/blog/posts

It's super convenient, our URLs match our file architecture, no problems.

However, there is no option to change the behavior of the router to allow the folder to point to a subdomain of the same name, for example :

/pages/blog/index.vue = blog.mywebsite.com
/pages/blog/posts/index.vue = blog.mywebsite.com/posts

I know it's impossible to change the client-side URL without reloading the page and so vue-router can not do it, however nuxt-i18n allows you to use a subdomain to change language and after my research, using NuxtServerInit it would be possible to create an alternative, something that I started to do but I have not managed to go all the way. 😔

My try :
https://gitlab.com/ankaworld/ankaworld.net/merge_requests/1/diffs

My research :
https://cmty.app/nuxt/nuxt.js/issues/c2076
https://github.com/nuxt/nuxt.js/issues/2378
https://github.com/vuejs/vue-router/issues/1611

This is my first issue on Nuxt community, it will surely lack explanations, details or other so do not hesitate to propose changes but do not be aggressive 😄

Hello there,

How I import route created with router-module?

import Vue from 'vue'
import VueGtm from 'vue-gtm'
import VueRouter from 'vue-router'
const router = new VueRouter() //new router but is wrong, the correct is getting VueRouter created.
const isProduction = process.env.NODE_ENV !== 'development'

Vue.use(VueGtm, {
  id: 'GTM-XXXXXXX',
  enabled: isProduction,
  vueRouter: router,
  debug: true,
});

How can I use router.js file to define route for few or more languages dynamic as it does nuxt-i18n (https://nuxt-community.github.io/nuxt-i18n/routing.html)?

I have two pages which can be routed to from the home page using <nuxt-link>.. This is working as exptected.

If I land directly on the the non-home page the <nuxt-link> fails.
The URL bar changes correctly to the home page address, but the page is not navigated to.
If I reload the page using the URL that has been placed there by <nuxt-link>, by focussing the URL bar and typing enter, the home page loads as expected.

How can <nuxt-link> place the correct path in the URL bar, but not navigate to it ?

hello, my component this refresh when I change the url !
But I do not have this problem without nuxt !
An idea ? thx 😇
{ path: '/komit', name: 'main_komit', component: main_komit }, { path: '/create/komit', name: 'create_komit', component: main_komit },

Ah, with some more exploration, I've figured it out!

I needed to import them, with a webpack chunk name. Which was handled by the original nuxt router.js

By simply changing my imports, chunking seems to be returned. 👍

Originally, I was trying to import like so

import Homepage from '~/pages/Homepage.vue';

Instead, this will import the Homepage component, and chunk it as pages/Homepage

const Homepage = () => import('~/pages/Homepage.vue' /* webpackChunkName: 'pages/Homepage' */).then(m => m.default || m);

I assume there is an undocumented portion of implementing router-module that I'm missing, to restore proper chunking functionality to my app.

When we use nuxt's magic routing, we're given all our pages as individual chunks.

When building the same page structure using router-module, I'm only seeing vendor/common chunking, while all pages are bundled up into main.js

--

Is there some config in router-module I'm missing? Is this a bug, I should make a formal report for?

I assume I need to extend webpack, and include my own list of routes to chunk…

Likely implementing the nuxt router.js in a similar way myself… right?

@javialon26 Sorry I forgot something, try with:

import Router from 'vue-router'

// import HomePage from '@/components/pages/index.vue'

const HomePage = () => import('@/components/pages/index.vue').then(m => m.default || m)
const HelpPage = () => import('@/components/pages/ayuda.vue').then(m => m.default || m)

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: HomePage
      },
      {
        path: '/ayuda',
        name: 'ayuda',
        component: HelpPage
      }
    ]
  })
}

When you install router-module or router configured as manual, yarn build does not generate for each page.

I need to generate for each page due of server Tomcat.
With server tomcat, when I refresh page outside index.html, I get error 404 because it does not match URI.

What is solution for load page outside index.html in production?

How can i extends de main routes inside a custom nuxt module?

i've tried to do:

app.router.addRoutes(routes)

function but it only adds the route to the client side

when refresh the route disappears

can anyone help?

I checked the tutorial from Nuxt officical page and write a nested route similar to the sample. However while i'm using external js in local setting form(https://nuxtjs.org/faq),it seems not loading external js in local setting through this.$router.push({path:***}) or this.$router.push(name:childviewName).

But the url has directed to the page. And the exrernal sources written in local setting form can be loaded after directly refreshing the page. Though writting external sources in Global Settings can work(I've tested) ,but i guess that's not a good way to solve this problem.

Is it possible to use vue-router's aliasing in Nuxt with router-module? If not, is there another way to alias routes?