Develop Reference

VueJS i18n Routes 404 Page

The Idea
Let me first tell you the idea, user enter "domain.com" user will get redirected to "domain.com/en" where is set by default to the english language, after that user can navigate throughout the website for example to "domain.com/en/about-us/".
My Issue
I can't figure out how to set up the routing for the "domain.com/wrong-page" where is also the global i18n parameter that i'm waiting for or "domain.com/wrong-language/corect-page" so the user can get the appropriate 404 page that i want.
My Set Up
Router file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import i18n from '../i18n'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: `/${i18n.locale}`
},
{
path: '/:lang',
component: {
render(c) { return c('router-view') }
},
children: [
{
path: '',
name: 'Home',
component: Home
},
{
path: 'about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/*',
name: '404',
component: () => import(/* webpackChunkName: "404" */ '../components/404.vue')
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Main.js file
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'
import LanguageSwitcher from "#/components/LanguageSwitcher.vue";
import NavigationTopMenu from "./components/NavigationTopMenu.vue";
import Footer from "./components/Footer.vue";
Vue.component('language-switcher', LanguageSwitcher)
Vue.component('navigation-top-menu', NavigationTopMenu)
Vue.component('footer-g', Footer)
Vue.config.productionTip = false
// use beforeEach route guard to set the language
router.beforeEach((to, from, next) => {
// use the language from the routing param or default language
let language = to.params.lang;
if (!language) {
language = 'en'
}
// set the current language for i18n.
i18n.locale = language
next()
})
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')

So, another developer reached out to me, the answer was pretty straight forward we can implement a custom regex for the lang to limit what can be matched with.
:lang
needs to be
:lang(en|fr|es)
another solution is to configure the navigation guard further and redirect to the following error page.

Npm run generate not generating routes

I am using vue-router in a nuxt project and when i run npm run generate it generates everything except my pages. I think it has got something to do with the router because before using vue router i had no problems with generating the pages Here is my router:
router.js
import Vue from 'vue'
import Router from "vue-router"
import Home from '../debonkelaer/pages/index.vue'
import actueel from '../debonkelaer/pages/actueel.vue'
import impressies from '../debonkelaer/pages/impressies.vue'
import reglement from '../debonkelaer/pages/reglement.vue'
import reserveren from '../debonkelaer/pages/reserveren.vue'
import tarieven from '../debonkelaer/pages/Tarieven.vue'
import ingelogd from '../debonkelaer/pages/ingelogd.vue'
import firebase from 'firebase/app'
import 'firebase/auth'
Vue.use(Router);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/actueel',
name: 'Actueel',
component: actueel
},
{
path: '/impressies',
name: 'Impressies',
component: impressies
},
{
path: '/reserveren',
name: 'Reserveren',
component: reserveren
},
{
path: '/tarieven',
name: 'Tarieven',
component: tarieven
},
{
path: '/reglement',
name: 'Reglement',
component: reglement
},
{
path: '/ingelogd',
name: 'Ingelogd',
component: ingelogd,
}
]
const router = new Router({
mode: 'history',
base: '/',
routes
})
export function createRouter() {
return router
};```
If you need any additional code please reply.

When you're working with nuxt.js all routes are automatically generating from all your files in your pagesdirectory. That means you don't need to manually declare every route!
Be sure to check out the official documentation for nuxt.js: Automatic Routing
To check for auth you should use middleware.
If you only need it for one specific route/component, you can use something like the following code in your component's exported function
middleware({ redirect }) {
// If the user is not authenticated
const authenticated = YOUR_AUTH
if (!authenticated) {
return redirect('/login')
}
}

Dynamic import of routes into Vue router

I am creating a Vue starter kit app for a platform, and it will use a standard directory structure for creating all of the items needed for a resource (.vue files, routes, Vuex store modules, etc). I would like to take advantage of this known structure to dynamically load router path objects so the user doesn't have to manually add routes to the router index file.
For example, here's a sample directory structure:
/src
|
---resources
|
-------user
|
---User.vue
---routes.js
---store.js
event
|
---Event.vue
---routes.js
---store.js
job
|
---Job.vue
---routes.js
---store.js
The inside of a routes.js file looks like this:
import Event from '#/resources/event/Event'
export default [
{
path: '/events',
name: 'event',
component: Event
},
];
To do this manually in a standard router file (router.js or router/index/js), you would do something like this:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Auth from '#/components/Auth';
import eventRoutes from '#/resources/event/routes.js';
import userRoutes from '#/resources/user/routes.js';
import jobRoutes from '#/resources/job/routes.js';
Vue.use(Router);
let baseRoutes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'auth',
component: Auth
},
];
const routes = baseRoutes.concat(shiftCalendarRoutes)
.concat(eventRoutes)
.concat(userRoutes)
.concat(jobRoutes);
export default new Router({
mode: 'history',
routes,
})
What I would really like to do is this:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Auth from '#/components/Auth';
Vue.use(Router);
let routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'auth',
component: Auth
},
];
function loadRoutes() {
const routes = require.context('#/resources', true, /routes.js$/i);
routes.keys().forEach((key) => {
const path = '#/resources/' + key.substring(2);
// Dynamically import file using import statement
import something from path;
// Add imported default object to routes object.
});
return routesList;
}
export default new Router({
mode: 'history',
routes,
})
The problem I'm running into is the actual import. When I try something like
routeItems.keys().forEach((key) => {
// routesList.push('#/resources/' + key.substring(2));
const path = '#/resources/' + key.substring(2);
const routeModule = import(path).default();
});
I get a Critical dependency: the request of a dependency is an expression webpack error. I've tried other versions of import without any luck.
Is it possible to do what I'm trying to do with dynamic importing?

It doesn't really make sense to use import() together with require.context(), since the latter already provides the import. Given your use case, you only need require.context().
require.context() returns a context module, which exports a keys function that returns an array of all possible requests (i.e., the matching paths), each of which could be passed to the context itself (which invokes its resolve function) to import the corresponding module:
function loadRoutes() {
const context = require.context('#/resources', true, /routes.js$/i)
return context.keys()
.map(context) // import module
.map(m => m.default) // get `default` export from each resolved module
}

vue-router showing blank page when built

I'm asking for help. I use vuejs to make my application. Everything works perfectly. But I do the npm run build, I extract the dist folder and I open index.html, I have a blank page, and when I look in the console, I have no errors.
main.js
import Vue from "vue";
import Vuex from "vuex";
import router from "./router";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import store from "./store";
import {
ValidationObserver,
ValidationProvider,
extend,
localize
} from "vee-validate";
import fr from "vee-validate/dist/locale/fr.json";
import * as rules from "vee-validate/dist/rules";
// install rules and localization
Object.keys(rules).forEach(rule => {
extend(rule, rules[rule]);
});
localize("fr", fr);
// Install components globally
Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);
Vue.config.productionTip = false;
//load vue-moment
Vue.use(require("vue-moment"));
//Load vuex
Vue.use(Vuex);
//Load vueRouter
new Vue({
router,
vuetify,
store,
render: h => h(App)
}).$mount("#app");
router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Professeur from "../components/Professeur";
import Matiere from "../components/Matiere";
import Dashboard from "../components/Dashboard";
import Filiere from "../components/Filiere";
import Salle from "../components/Salle";
import Shedule from "../components/Shedule";
import SheduleLine from "../components/SheduleLine";
import Login from "../components/Login";
import Home from "../components/Home";
Vue.config.productionTip = false;
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
routes: [
{
path: "/dashboard",
name: "dashboard",
component: Dashboard,
meta: {
requiresAuth: true
},
children: [
{
path: "personnel/professeurs",
name: "p_professeur",
component: Professeur
},
{
path: "",
name: "home",
component: Home
}
]
},
{
path: "/login",
name: "login",
component: Login,
meta: {
guest: true
}
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
let user = JSON.parse(localStorage.getItem("_GET_TOKEN"));
if (!user && !user.token) {
next({
name: "login"
});
} else {
next();
}
} else {
next();
}
});
export default router;
App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
<script>
export default {
name: 'app',
}
</script>
Once I compile, I have no errors but a blank page.
Thanks for any help. I tried without the router view, I manage to launch the index.html once compiled for production and I have a rendering.

You're using history mode for your router, which means you'll access your pages with paths like /login or /dashboard or /dashboard/personnel/professeurs, which are the only routes you declared.
/ or /index.html does not display anything because the router doesn't know what they are.
However, in order to have history mode working, you cannot just have a static server. The server has to know that a request to /dashboard should return the index.html file.
If you used VueCLI, the docs here might be helpful:
If you are using Vue Router in history mode, a simple static file server will fail. For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead.
To fix that, you will need to configure your production server to fallback to index.html for any requests that do not match a static file. The Vue Router docs provides configuration instructions for common server setups.
If you don't want to deal with this, or don't have a server enabling you to do this, you can switch history to hash mode in your router. Your routes will be accessible at /index.html#/dashboard and so on.

If you are running into this issue (as I was) in 2022 with a serverless vue 3 application and vuex, you can configure the hash-histroy like so
import { createRouter, createWebHashHistory } from 'vue-router'
import { type RouteRecordRaw } from 'vue-router'
import { Admin, Welcome } from '/#/views'
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Welcome',
component: Welcome
},
{
path: '/admin',
name: 'Admin',
component: Admin
}
]
const router = createRouter({
history: createWebHashHistory(), // <--- this is important
routes
})
export { router }
See also: docs

router/index.js :
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
export default router
main_folder/vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
publicPath: ''
})
Important: use publicPath: '' and createWebHashHistory
That is all. You can now build. But remember that your links will appear as /index.html#/dashboard.

vue-router cannot implement the two level routing

I'm trying to implement the two level routing by using vue-router
main.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../page/firstPage.vue'
import Login from '../page/logIn.vue'
import Second from '../page/secondPage.vue'
Vue.use(Router)
const routes =[
{
path: '/',
component: Login
},
{
path: '/first',
component: First,
children: [ {
path: 'hello',
component: Hello
}
]
},
]
const router = new Router({
mode:'history',
routes:routes
})
export default router
But when I input http://localhost:8080/first/hello, it returns the 'First' component not the 'Hello' component.
thanks a lot