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>