來嘗試在 NX 中建立 Vue 元件庫 lib。

跟 Nuxt 一樣，目前官方沒有支援 Vue 的擴充，所以要手動設定。

首先建立一個基於 Vite 的 js lib。

pnpm exec nx generate @nx/js:library

設定 lib 名稱跟建置工具等。

>  NX  Generating @nx/js:library

✔ What name would you like to use for the library? · ui/vue-components
✔ Which unit test runner would you like to use? · vitest
✔ Which bundler would you like to use to build the library? Choose 'none' to skip build setup. · vite

? What should be the project name and where should it be generated?
❯ Derived:
    Name: ui-vue-components
    Root: libs/ui/vue-components

加入 Vue 相關的 package。

pnpm add -D vue vue-tsc @vitejs/plugin-vue @vitejs/plugin-vue-jsx

修改 vite.config.ts ，加入 Vue 插件。

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
		//...
  ],

	//...
});

修改 Typescript 設定。

// tsconfig.json
{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "module": "commonjs",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["vitest", "vite/client", "vue/ref-macros"],
    "jsx": "react"
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.lib.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

// tsconfig.lib.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../dist/out-tsc",
    "declaration": true,
    "types": ["node"]
  },
  "exclude": [
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx"
  ],
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "**/*.vue",
    "env.d.ts",
    "vite.config.ts"
  ]
}

在 src 目錄下增加一個 Vue 元件類型的型別宣告。

// src/vue-shim.d.ts
/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<
    NonNullable<unknown>,
    NonNullable<unknown>,
    Nullable<unknown>
  >;
  export default component;
}

設定好後就能來建立元件了。

<!-- src/lib/Button.vue -->
<template>
  <button>
    <slot></slot>
  </button>
</template>

// src/index.ts
export { default as Button } from './lib/Button.vue';

跟 React 那時一樣，經由根目錄的 tsconfig.base.json 提供的路徑引入元件。

import { Button } from '@ironman-nextjs/ui/vue-components'

不過之前提過的 NX 不會自動偵測 Vue 的關聯，所以要經由設定 tag 來手動建立關聯。

// project.json
{
	//...
	"tags": ["scope:ironman-nuxt"]
}

這樣才能在執行 target 的時候自動執行元件庫的建置後再進行專案的建置。