[SOLVED] Nuxt2 Router.js

Issue

This Content is from Stack Overflow. Question asked by abdullah35

I have a stupid simple question that I basically failed to find a good answer for.
I have a nuxt2 project that has a @nuxtjs/router module on it. I have added the module on the buildModules on nuxt.config.js and created router.js on the src folder.

this is my nuxt.config.js file :

    ssr: true,     // tauri 
 target: 'static', // tauri     
  server : {
    host:"127.0.0.1",
    port: 8001
  },

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    ...
  },
  env:{
    MEDIA_API:process.env.VUE_APP_MEDIA_API,
    API_URL: process.env.API_URL

  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    ...
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  '@nuxtjs/router'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    ...
    '@nuxtjs/router',
    ...
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extractCSS: true,
    plugins: [ // to import jQuery :" 
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
      }),
    ],
    standalone: true
  },

  router: {
    middleware: ['auth']
  },

  auth: {
    ...
  }

and here is my router.js file :

import { parseHTML } from 'jquery';
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// this is just a function to help me not writing the full path of each page
const page = (path) => () => import(`~/pages/${path}`).then(m => m.default || m)

const routes = [
  {path: '/', name: 'home', component: page('index.vue')},
  {path: '/login', name: 'login', component: page('login.vue')},
  {path: '/players', name: 'allPlayers', component: page('players/index.vue')},
  {path: '/players/:id', name: 'singlePlayer', component: page('players/view.vue')},
  {path: '/plans', name: 'allPlans', component: page('plans/index.vue')},
  {path: '/plans/new', name: 'newPlan', component: page('plans/new.vue')},
  {path: '/activities', name : 'allActs', component: page ('activities/index.vue')},
  {path: '/activities/new', name: 'newAct', component: page('activities/new.vue')},
  {path: '/activityPlayer/:id', name: 'viewActivityPlayer', component: page('activities/viewActivityPlayer')},
  {path: '/auth/login', name: 'auth.login', component: page('auth/login')},
  {path: '/superAdmin/', name: 'superAdmin', component: page('superAdmin/index.vue')},
  {path: '/superAdmin/viewAll', name: 'viewAdmins', component: page('superAdmin/viewAdmins.vue')},


];


export function createRouter() {
  return new Router({
    routes,
    mode: 'history'
  })
}

I want to generate full static build to deploy my nuxt app on a tauri build. I was able to successfully deploy a nuxt app that does NOT has that router.js file. The build generate just generate all routes by default in the dist folder.

How can I generate the routes ?



Solution

I’ve tried with the /login path and it’s working great as shown in this commit, there was a typo in the path tho (I did tried only for that one since it was an obvious one for me).

I also removed the useless package-lock.json since you use yarn in your project (could be vice-versa of course) and since you should not use both at the same time. Added a few explicit keys in the nuxt.config.js file too.

Commented @nuxtjs/auth-next, ran yarn generate && yarn start and I have successfully access to the given path.

The generated route files are maybe not that friendly (because of their hash) but they are still available in the dist directory. There is a way to make them prettier, you could search for that on Stackoverflow/Google.


Update: it works with the auth middleware too actually.


This Question was asked in StackOverflow by abdullah35 and Answered by kissu It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?