今簡単なポートフォリオサイトを Nuxt.js で作ってるんですけど、現状構成はこんな感じになってます。

pages/
--| works/
-----| illustrations
-----| webgl-sandbox
--------| index.vue
--------| foo.vue
--------| bar.vue
-----| webgl-sandbox.vue

pages/works/webgl-sandbox.vue の中身はこんな感じ。

<template>
 <nuxt-child />
</template>
<script lang="ts" scoped>
import Vue from "vue";
export default Vue.extend({
 layout: "works/webgl-sandbox"
});
</script>

layout/works/webgl-sandbox.vue の中身はこんな感じ。

<template>
 <div class="wrapper">
   <header>
     <div id="home">WebGL sandbox</div>
     <nav>
       <ul>
         <li>
           <nuxt-link to>My first WebGL</nuxt-link>
         </li>
         <li>
           <nuxt-link to="foo">foo</nuxt-link>
         </li>
         <li>
           <nuxt-link to="bar">bar</nuxt-link>
         </li>
       </ul>
     </nav>
   </header>
   <main>
     <nuxt />
   </main>
 </div>
</template>

上記のように nuxt-link が 3 つあるんですが、/works/webgl-sandbox に遷移すると、それぞれ

- works/webgl-sandbox
- works/foo
- works/bar

という感じのパスになってしまいます。なんで index.vue だけ /webgl-sandbox までついてるのに他のパスはそうならないんだ…。

ひとまず絶対パスにしておこうと思うけど、pages の構造に即したパスになんとかできないかな…。