在 Nuxt 專案中使用 Sass 和 Vue3 Composition API

建立專案

在終端機輸入執行指令 npx create-nuxt-app project-name 後，會進入問題面板，能按照需求選擇開發上習慣使用的工具，如套件管理工具、伺服器框架、UI 框架、測試框架、渲染模式、版本控制系統等。

不過 Nuxt 還未全面支援 Sass 和 Vue3，所以如果在 Nuxt 中使用 Sass/Scss，或是 Vue3 的 Composition API，就會報錯。

安裝 Sass

Sass 的解決方案較為容易，在終端機執行以下指令即可開始使用 Sass。

npm install --save-dev sass sass-loader@10 fiber

安裝 Composition API

Composition API 的部分，在終端機執行以下指令後，還需要到 nuxt.config.js 檔案中手動註冊模組。

npm install @nuxtjs/composition-api --save

在 nuxt.config.js 檔案中加入 Composition API：

{

  buildModules: [

    '@nuxtjs/composition-api'

  ]

}

以 Header component 為例，匯入 nuxtjs/composition-api 後即可開始使用 Vue3 的 Composition API。

---

參考資料：

Configuration - Pre-processors

Nuxt Composition API

---

感謝您的閱讀，我試著將生活與自己所學到的知識，以平易近人的方式傳達給正在努力進步的同好，甚至是領域之外卻有興趣的人。如果喜歡我的文章，歡迎贊助我，你的鼓勵也是我進步的動力。