開源免費可自訂的元件庫 shadcn-vue

筆者主要是寫後端，偶爾寫前端的時候會使用 Vue3 ，在之前就有看到在 GitHub 有 60k Star 的 shadcn-ui/ui，他是使用 React + tailwind 開發的「元件集合」，除了可以和平時一樣使用 npm 安裝套件以外，還可以很方便的直接複製程式碼到自己的專案，不需要依賴原始專案/套件，最主要的優點就是完全免費，和很輕易的修改(因為程式碼都被你複製過來了)。那時候看到覺得很棒，但也很可惜，因為筆者不會寫 React ，並且前端也不是筆者主要開發的部分，短時間內不會特別學 React ，所以雖然這個看起來很好用，但是可惜筆者用不到，給了一個 starred 後就忘了這件事。

不過現在在 GitHub 上出現了 3.3k Star 的 radix-vue/shadcn-vue，基本上就是 Vue3 版的 shadcn-ui ，不過不屬於剛剛提到的 shadcn-ui，是由使用 Vue 的社群開發的(有得到 shadcn-ui 專案的祝福)。

使用示範

本文使用 Nuxt3 做示範

安裝 TypeScript：

    
npm install -D typescript
    

安裝 TailwindCSS：

    
npx nuxi@latest module add @nuxtjs/tailwindcss
    

設定 nuxt.config.ts：

    
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt"],shadcn: {
    prefix: '',
    componentDir: './components/ui'
  }
})
    

使用指令初始化 shadcn-vue：

    
npx shadcn-vue@latest init
    

接下來會詢問問題，依照內容使用鍵盤上下鍵移動並使用 Enter 選擇：

    
√ Would you like to use TypeScript? (recommended)? ... no / yes
√ Which framework are you using? » Nuxt
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Zinc
√ Where is your tsconfig.json file? ... .nuxt/tsconfig.json
√ Where is your global CSS file? (this file will be overwritten) ... assets/css/tailwind.css
√ Would you like to use CSS variables for colors? ... no / yes
√ Where is your tailwind.config located? (this file will be overwritten) ... tailwind.config.js
√ Configure the import alias for components: ... @/components
√ Configure the import alias for utils: ... @/lib/utils
√ Write configuration to components.json. Proceed? ... yes
    

翻譯如下：

    
是否使用 typeScript
使用的框架
使用什麼樣式(style)：預設(default) / new-york
基礎顏色： Zinc(官網預設的黑色)
tsconfig.json 檔案位置： .nuxt/tsconfig.json
全域 CSS 檔案位置： assets/css/tailwind.css
是否使用 CSS 變數設定顏色
tailwind.config 檔案位置： tailwind.config.js
設定元件的匯入別名： @/components
工具函式庫(utils)的匯入別名： @/lib/utils
將設定檔寫入 components.json
    

安裝完畢。

加入元件

要安裝元件有兩種方式，這裡介紹最推薦的那種，就是使用指令。
例如要安裝 Button 元件：

    
npx shadcn-vue@latest add button
    

然後就會在以下位置加上相關的檔案：

  
project/
`-- components/
  `-- ui/
      `-- button/
          |-- Button.vue
          `-- index.ts
  

可以很方便的使用：

    
<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Button</Button>
</template>
    

想要修改元件也可以直接進去上面的檔案修改。

話說預設的背景長這樣： bg-zinc-950

    

<template>
  <div class="min-h-screen min-w-full bg-zinc-950 ">
  </div>
</template>
    

參考資料：
GitHub - radix-vue/shadcn-vue