移動檔案到開發模組資料夾

昨天介紹完安裝的基本環境就開始一步一步建立自己的模組啦!

首先我們要移動檔案到模組開發資料夾

接下來會使用到的檔案有

• assets/
• components/
• layouts/
• pages/
• plugins/
• public/
• server/
• tailwind.config.ts

把這些複製到 ⇒ /src/ runtime 下~

移動完之後就開啟 module.ts

installModule

async function installModule (moduleToInstall: string | NuxtModule, inlineOptions?: any, nuxt?: Nuxt)

moduleToInstall: 要安裝的 module 名稱

inlineOptions: 該 module 提供的 option，比如 @nuxtjs/tailwind 的 configuration 設定 (https://tailwindcss.nuxtjs.org/getting-started/configuration)

接下來就按照之前的順序~先安裝 module 嚕

step 1: 首先引入 installModule

import { installModule} from  '@nuxt/kit'

step 2: 安裝 @nuxtjs/tailwindcss 與 nuxt-icon

//  module.ts
export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'seal-module',
    configKey: 'sealModule',
  },
  defaults: {},
  async setup(_options, _nuxt) {

    /** 安裝模組 */
    await installModule('@nuxtjs/tailwindcss')
    await installModule('@nuxt/icon')
  }
})

完成之後就開開心心的移動到模組開發資料夾下，使用 npm run dev 準備啟動看看 >o<
…

…

…

然後 terminal 會噴出 Cannot start nuxt: Cannot find module '@nuxt/icon'

…

…

…

寫完 installModule 並不代表開發環境安裝了呀~記得安裝以上兩個 module

npx nuxi module add icon
npm install @nuxtjs/tailwindcss

// 一定要記得裝對位置呀!

安裝完成之後就可以到 playground 試試看是否成功

// playground/app.vue
<template>
  <div>
    Nuxt module playground!
    <div class="text-red-500">
      <Icon name="fa6-solid:bone" size="50" />
    </div>
  </div>
</template>

一樣召喚我們的大骨頭進行改色吧 (請見第二天)

如果看到跟下圖一樣就代表成功囉!