Pathpida と Nuxt.js

TypeScript friendly internal link client for Nuxt.js.

Star

特徴

• 型安全。Next.js で内部リンクを取り扱うための型定義ファイルを自動生成します。
• 設定不要。設定を必要とせず、インストール後すぐに使用できます。
• 実行時負荷無し。ランタイムコードがバンドルに含まれないので軽量です。

インストール

• npm を使用:

  $ npm install pathpida npm-run-all --save-dev

• Yarn を使用:

  $ yarn add pathpida npm-run-all --dev

セットアップ

package.json

{
  "scripts": {
    "dev:pathpida": "pathpida --watch",
    "build:client": "pathpida && aspida && nuxt-ts",
    "build:types": "pathpida && aspida && npm run build:frourio --prefix server"
  }
}

nuxt.config.js または nuxt.config.ts

{
  plugins: ['~/plugins/$path'],
  srcDir: 'client', // optional
  router: {
    trailingSlash: true // optional
  }
}

使い方

pages/index.vue
pages/post/create.vue
pages/post/_pid.tsx

plugins/$path.ts // Generated automatically by pathpida

pages/index.vue

<template>
  <div>
    <nuxt-link :to="$pagesPath.post._pid(1).$url()" />
    <div @click="onclick" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    onclick() {
      this.$router.push(this.$pagesPath.post._pid(1).$url());
    },
  },
});
</script>

クエリの定義

pages/post/create.vue

<script lang="ts">
import Vue from 'vue';

export type Query = {
  userId: number;
  name?: string;
};

export default Vue.extend({});
</script>

pages/post/_pid.vue

<script lang="ts">
import Vue from 'vue';

export type OptionalQuery = {
  limit: number;
  label?: string;
};

export default Vue.extend({});
</script>

pages/index.vue

<template>
  <div>
    <nuxt-link :to="$pagesPath.post.create.$url({ query: { userId: 1 } })" />
    <div @click="onclick" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    onclick() {
      this.$router.push(this.$pagesPath.post._pid(1).$url());
      this.$router.push(
        this.$pagesPath.post._pid(1).$url({ query: { limit: 10 }, hash: 'sample' })
      );
    },
  },
});
</script>

⚠️ Query/OptionalQuery 型はいかなる参照型も含んではいけません。

TypeScript の制限により、.vue ファイルから export された型を plugins/$path.ts で import できないことが理由です。
他のファイルから型を import したい場合は、import types を絶対パスで使用してください。

types/users.ts

export type UserId = number;

pages/post/create.vue

<script lang="ts">
import Vue from 'vue';

export type Query = {
  userId: import('~/types/users').UserId;
  name?: string;
};

export default Vue.extend({});
</script>

Generate static files path

package.json

{
  "scripts": {
    "dev:pathpida": "pathpida --enableStatic --watch",
    "build:client": "pathpida --enableStatic && aspida && nuxt-ts",
    "build:types": "pathpida --enableStatic && aspida && npm run build:frourio --prefix server"
  }
}

pages/index.vue
pages/post/create.vue
pages/post/_pid.vue

static/aa.json
static/bb/cc.png

plugins/$path.ts // Generated automatically by pathpida

pages/index.vue

<template>
  <div>
    <nuxt-link :to="$pagesPath.post.create.$url({ query: { userId: 1 } })" />
    <img :src="$staticPath.bb.cc_png" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({});
</script>