Pathpida with Nuxt.js

TypeScript friendly internal link client for Nuxt.js.

Star

Features

• Type safety. Automatically generate type definition files for manipulating internal links in Nuxt.js.
• Zero configration. No configuration required, can be used immediately after installation.
• Zero runtime. Lightweight because runtime code is not included in the bundle.

Install

• Using npm:

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

• Using Yarn:

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

Setup

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 or nuxt.config.ts

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

Usage

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>

Define query

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 type must not contain any reference types.

This is because due to typescript restrictions, types exported from .vue files cannot be imported in plugins/$path.ts.
If you want to import types from other files, please use import types with absolute paths.

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>