Cannot use custom meta fields within beforeEach

[rbaprado]

Starting from a npm create vuetify with just the changes highlighted below, I am facing the same problem as #21.

.\src\pages\index.vue:

<route lang="json">
{
  "meta": {
    "name": "pateta",
    "requiresAuth": true
  }
}
</route>

<template>
  <HelloWorld />
</template>

<script lang="ts" setup>
//
</script>

frontend_vue\src\router\index.ts:

/**
 * router/index.ts
 *
 * Automatic routes for `./src/pages/*.vue`
 */

// Composables
import { createRouter, createWebHistory } from "vue-router/auto";
import { setupLayouts } from "virtual:generated-layouts";
import { useAuthStore } from "@/store/auth";

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  extendRoutes: setupLayouts,
});

router.beforeEach((to) => {
  const auth = useAuthStore();
  console.log(to.meta);
  // instead of having to check every route record with
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    return {
      path: "/login",
      // save the location we were at to come back later
      query: { redirect: to.fullPath },
    };
  }
});

export default router;

console.log output:

{
    "isLayout": true
}

package.json:

{
  "name": "frontend_vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "7.4.47",
    "@types/vue-router": "^2.0.0",
    "core-js": "^3.35.1",
    "roboto-fontface": "*",
    "vue": "^3.4.15",
    "vuetify": "^3.5.1"
  },
  "devDependencies": {
    "@babel/types": "^7.23.6",
    "@types/node": "^20.11.6",
    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/eslint-config-typescript": "^12.0.0",
    "eslint": "^8.56.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.20.1",
    "pinia": "^2.1.7",
    "sass": "^1.70.0",
    "typescript": "^5.3.3",
    "unplugin-fonts": "^1.1.1",
    "unplugin-vue-components": "^0.26.0",
    "unplugin-vue-router": "^0.7.0",
    "vite": "^5.0.12",
    "vite-plugin-vue-layouts": "^0.11.0",
    "vite-plugin-vuetify": "^2.0.1",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.27"
  }
}

[rbaprado]

Nevermind, just refreshed again and it is working somehow...

[posva]

BTW it's fine to ask for help but please do it in the Discussions. A bug report requires a boiled down reproduction 🙂

[victorchendra02]

Hello there, I tried yours like this

<route lang="json">
{
  "meta": {
    "name": "pateta",
    "requiresAuth": true
  }
}
</route>

Is not working for me. Instead, it's working for this src/pages/*.vue

<script setup lang="ts">
definePage({
    meta: { 
        requiresAuth: true,
        // you can add your custom meta
    },
});
</script>

Then in src/router/index.ts you can do the rest

router.beforeEach((to, from, next) => {
  ...
  console.log(to.meta);
  ...
  if (to.meta.requiresAuth) {
    ...
    };
  }
});

But, I also want to validate my method: Is my method is valid? Using definePage in <script setup>?

[posva]

yes