vue.jsnuxt.jsnuxt3.js

Can nuxt 3 rewrite url with sub directory

I have project structure like this

- pages
 - login.vue
 - index.vue
 auth
 - about.vue

by default, nuxt can access a path with 'localhost:3000/' and it will rendered by /pages/index.vue
in case if i want to access a page in dir auth/about it's must be access a path 'localhost:3000/auth/about'
but i want to access path with 'localhost:3000/about

Solution

  • You can use a page alias if you want to have another entry point

    <script setup>
definePageMeta({
  alias: ['/about']
})
</script>

<template>
  <div>this is an auth page</div>
</template>

    So that the following file structure

    enter image description here

    could be accessed via either /about or /auth/about.