在 Nuxt 專案中使用 Sass 和 Vue3 Composition API
閱讀時間約 2 分鐘
Nuxt.js 是以 Vue 為基底所建構的框架，透過 Nuxt.js，我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
建立專案
在終端機輸入執行指令 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。
參考資料：
感謝您的閱讀，我試著將生活與自己所學到的知識，以平易近人的方式傳達給正在努力進步的同好，甚至是領域之外卻有興趣的人。如果喜歡我的文章，歡迎贊助我，你的鼓勵也是我進步的動力。
留言0
查看全部
Ray C的沙龍 的其他內容
你可能也想看
迎新活動「方格新手村」：新格友註冊加入方格子，知名日料吃到飽餐券送給你！
👉 還不是 vocus 的會員嗎？點此註冊，參與新手村活動 👈
近期站上也出現了不少新格友，為了歡迎各位的加入，「方格新手村」隨之登場！
即日起，只要是新註冊帳號於活動期間內發佈 3 則文章，就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂，我們準備了小任
2024-06-21
103
什麼人適合國泰世華 CUBE App ？整理5大推薦原因你覺得哪間網銀的 App 最好用？
近幾年，我為了拿到很多家銀行的回饋，辦了很多家銀行的帳戶，數一數至少也有十幾間！
比較下來，國泰世華 CUBE App ，是我用起來最順手的 👍
國泰究竟贏在哪裡呢？讓我整理 5 個原因給大家～
發佈在
波琳達的沙龍
2024-07-05
63
川普當選，對台股是利多還是利空？川普在槍擊事件中所表現出來的英勇形象，讓他贏得美國總統大選幾乎已成定局。沒想到他隨口的一句話「台灣搶走美國的晶片生意，所以要付保護費」，就讓台積電在短短三天跌掉超過100 元，台股也跌掉1100點以上。台積電、台股會就此一路下跌嗎？未來該如何因應？
發佈在
施昇輝的小資幸福講堂
2024-07-20
77
在工作中消業、修福慧以下為一位有緣人分享：
「感謝抱怨的人」─聖嚴法師《真正的快樂》
每個人的內心深處都希望知道自己有哪些缺點。只是有些人心量很小，只喜歡聽恭維、奉承的話，如果你對他說一些逆耳的忠言，他不但不會知錯，還會加以搪塞。你要是向他抱怨，他可能會反過來訓斥你一頓，認為問題不是出在他身上，而是你犯了錯誤，
發佈在
香港吃貨寶寶的沙龍
2021-09-28
3
在《月亮和六便士》中看見的不只是夢想與現實
英國作家毛姆所寫的《月亮和六便士》（The Moon and Sixpence）是許多愛書人都曾經閱讀過的經典，人們通常會把這本書定位為「討論理想與現實的文學作品」，長大後重讀此書才發現遠遠不只如此。
發佈在
Chin的沙龍
2021-05-05
6
在虛無中找到價值，在痛苦中找到意義，幸福和平靜將隨你而行
維克多．弗蘭克的書被翻譯成32種語言，英文版的再版就有數百萬的銷售。
記者問他對此有什麼感覺?
他回答：「如果上百萬人爭相買下一本光看書名就知道是在探討生命意義的書，那麼生命的意義對他們想必是坐立難安的疑惑。」
維克多．弗蘭克( Viktor E. Frankl )是誰?
發佈在
一書一會的沙龍
2020-11-05
5
【在島嶼扎根】用畫筆勾勒溫度：陳敏超和藝術的幸福日常
你還記得嗎？小時候拾起蠟筆在牆上塗鴉，或課堂上在古人臉上化妝。
我們都曾做過畫家，有一場天馬行空的創作夢，長大之後，夢醒了，你還記得嗎？
坐落於台中車站附近的Vision Art成立至今剛好六週年，和一般印象難以親近的藝術畫廊不同，從大面的玻璃窗就能將內部一覽無遺，它是以Art Jammi
發佈在
紙飛機生活誌的沙龍
2020-03-14
2
迎新活動「方格新手村」：新格友註冊加入方格子，知名日料吃到飽餐券送給你！
👉 還不是 vocus 的會員嗎？點此註冊，參與新手村活動 👈
近期站上也出現了不少新格友，為了歡迎各位的加入，「方格新手村」隨之登場！
即日起，只要是新註冊帳號於活動期間內發佈 3 則文章，就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂，我們準備了小任
2024-06-21
103
什麼人適合國泰世華 CUBE App ？整理5大推薦原因你覺得哪間網銀的 App 最好用？
近幾年，我為了拿到很多家銀行的回饋，辦了很多家銀行的帳戶，數一數至少也有十幾間！
比較下來，國泰世華 CUBE App ，是我用起來最順手的 👍
國泰究竟贏在哪裡呢？讓我整理 5 個原因給大家～
發佈在
波琳達的沙龍
2024-07-05
63
川普當選，對台股是利多還是利空？川普在槍擊事件中所表現出來的英勇形象，讓他贏得美國總統大選幾乎已成定局。沒想到他隨口的一句話「台灣搶走美國的晶片生意，所以要付保護費」，就讓台積電在短短三天跌掉超過100 元，台股也跌掉1100點以上。台積電、台股會就此一路下跌嗎？未來該如何因應？
發佈在
施昇輝的小資幸福講堂
2024-07-20
77
在工作中消業、修福慧以下為一位有緣人分享：
「感謝抱怨的人」─聖嚴法師《真正的快樂》
每個人的內心深處都希望知道自己有哪些缺點。只是有些人心量很小，只喜歡聽恭維、奉承的話，如果你對他說一些逆耳的忠言，他不但不會知錯，還會加以搪塞。你要是向他抱怨，他可能會反過來訓斥你一頓，認為問題不是出在他身上，而是你犯了錯誤，
發佈在
香港吃貨寶寶的沙龍
2021-09-28
3
在《月亮和六便士》中看見的不只是夢想與現實
英國作家毛姆所寫的《月亮和六便士》（The Moon and Sixpence）是許多愛書人都曾經閱讀過的經典，人們通常會把這本書定位為「討論理想與現實的文學作品」，長大後重讀此書才發現遠遠不只如此。
發佈在
Chin的沙龍
2021-05-05
6
在虛無中找到價值，在痛苦中找到意義，幸福和平靜將隨你而行
維克多．弗蘭克的書被翻譯成32種語言，英文版的再版就有數百萬的銷售。
記者問他對此有什麼感覺?
他回答：「如果上百萬人爭相買下一本光看書名就知道是在探討生命意義的書，那麼生命的意義對他們想必是坐立難安的疑惑。」
維克多．弗蘭克( Viktor E. Frankl )是誰?
發佈在
一書一會的沙龍
2020-11-05
5
【在島嶼扎根】用畫筆勾勒溫度：陳敏超和藝術的幸福日常
你還記得嗎？小時候拾起蠟筆在牆上塗鴉，或課堂上在古人臉上化妝。
我們都曾做過畫家，有一場天馬行空的創作夢，長大之後，夢醒了，你還記得嗎？
坐落於台中車站附近的Vision Art成立至今剛好六週年，和一般印象難以親近的藝術畫廊不同，從大面的玻璃窗就能將內部一覽無遺，它是以Art Jammi
發佈在
紙飛機生活誌的沙龍
2020-03-14
2