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

閱讀時間約 2 分鐘
NuxtJS
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。

參考資料:

感謝您的閱讀,我試著將生活與自己所學到的知識,以平易近人的方式傳達給正在努力進步的同好,甚至是領域之外卻有興趣的人。如果喜歡我的文章,歡迎贊助我,你的鼓勵也是我進步的動力。
為什麼會看到廣告
37會員
31內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
發表第一個留言支持創作者!
Ray C的沙龍 的其他內容
最近對爬蟲感到興趣,幾天的研究發現 Puppeteer 這套由 Google 開源、使用無介面操作 Chrome 做自動化測試的 Node.js 函式庫也能用來爬取資料...
簡単だけど、すごく良くなる 77 のルール デザイン力の基本
《為什麼要睡覺?睡出健康與學習力、夢出創意的新科學》 Why We Sleep:The New Science of Sleep and Dreams
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
本文翻譯自 40 Tips that will change your coding skills forever。作者 Kesk 列出了一些對職業生涯有幫助的事情,很快就能讀完,但要正確應用到生活中可能需要一生的時間。Kesk 從事將近十五年的 App 開發...
最近對爬蟲感到興趣,幾天的研究發現 Puppeteer 這套由 Google 開源、使用無介面操作 Chrome 做自動化測試的 Node.js 函式庫也能用來爬取資料...
簡単だけど、すごく良くなる 77 のルール デザイン力の基本
《為什麼要睡覺?睡出健康與學習力、夢出創意的新科學》 Why We Sleep:The New Science of Sleep and Dreams
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
本文翻譯自 40 Tips that will change your coding skills forever。作者 Kesk 列出了一些對職業生涯有幫助的事情,很快就能讀完,但要正確應用到生活中可能需要一生的時間。Kesk 從事將近十五年的 App 開發...
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
以下為一位有緣人分享:   「感謝抱怨的人」─聖嚴法師《真正的快樂》   每個人的內心深處都希望知道自己有哪些缺點。只是有些人心量很小,只喜歡聽恭維、奉承的話,如果你對他說一些逆耳的忠言,他不但不會知錯,還會加以搪塞。你要是向他抱怨,他可能會反過來訓斥你一頓,認為問題不是出在他身上,而是你犯了錯誤,
Thumbnail
英國作家毛姆所寫的《月亮和六便士》(The Moon and Sixpence)是許多愛書人都曾經閱讀過的經典,人們通常會把這本書定位為「討論理想與現實的文學作品」,長大後重讀此書才發現遠遠不只如此。
英語聽力和口說練習 你要去上班嗎?聽英文歌吧 你要打掃房間嗎?聽一聽英語播客。遛狗嗎?聽一聽英語新聞。作為一個ESL學習者,你應該明白的是,如果你想成為一門流利的外語,練習是很重要的。 口語練習,但英文口說 怎麼進步?  以下是一些有用的英語練習,幫助你開始每天練習 在休息時間練習英文 這個練習雖然
Thumbnail
維克多.弗蘭克的書被翻譯成32種語言,英文版的再版就有數百萬的銷售。 記者問他對此有什麼感覺? 他回答:「如果上百萬人爭相買下一本光看書名就知道是在探討生命意義的書,那麼生命的意義對他們想必是坐立難安的疑惑。」 維克多.弗蘭克( Viktor E. Frankl )是誰? 
因為我有幾個朋友,因結婚後,住在歐美國家,最近的疫情,讓我有點擔心她們,不過看到她們在臉書常常發動態,就覺得心裡有些安心,起碼知道她們是健康的。 也因為疫情關係,很多室內的音樂表演,或藝文表演活動,不是取消就是延期,看到很多喜歡的鋼琴獨奏會都紛紛取消(今年是貝多芬250冥誕紀念,小貝先生表示哭哭),
Thumbnail
你還記得嗎?小時候拾起蠟筆在牆上塗鴉,或課堂上在古人臉上化妝。 我們都曾做過畫家,有一場天馬行空的創作夢,長大之後,夢醒了,你還記得嗎?     坐落於台中車站附近的Vision Art成立至今剛好六週年,和一般印象難以親近的藝術畫廊不同,從大面的玻璃窗就能將內部一覽無遺,它是以Art Jammi
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
以下為一位有緣人分享:   「感謝抱怨的人」─聖嚴法師《真正的快樂》   每個人的內心深處都希望知道自己有哪些缺點。只是有些人心量很小,只喜歡聽恭維、奉承的話,如果你對他說一些逆耳的忠言,他不但不會知錯,還會加以搪塞。你要是向他抱怨,他可能會反過來訓斥你一頓,認為問題不是出在他身上,而是你犯了錯誤,
Thumbnail
英國作家毛姆所寫的《月亮和六便士》(The Moon and Sixpence)是許多愛書人都曾經閱讀過的經典,人們通常會把這本書定位為「討論理想與現實的文學作品」,長大後重讀此書才發現遠遠不只如此。
英語聽力和口說練習 你要去上班嗎?聽英文歌吧 你要打掃房間嗎?聽一聽英語播客。遛狗嗎?聽一聽英語新聞。作為一個ESL學習者,你應該明白的是,如果你想成為一門流利的外語,練習是很重要的。 口語練習,但英文口說 怎麼進步?  以下是一些有用的英語練習,幫助你開始每天練習 在休息時間練習英文 這個練習雖然
Thumbnail
維克多.弗蘭克的書被翻譯成32種語言,英文版的再版就有數百萬的銷售。 記者問他對此有什麼感覺? 他回答:「如果上百萬人爭相買下一本光看書名就知道是在探討生命意義的書,那麼生命的意義對他們想必是坐立難安的疑惑。」 維克多.弗蘭克( Viktor E. Frankl )是誰? 
因為我有幾個朋友,因結婚後,住在歐美國家,最近的疫情,讓我有點擔心她們,不過看到她們在臉書常常發動態,就覺得心裡有些安心,起碼知道她們是健康的。 也因為疫情關係,很多室內的音樂表演,或藝文表演活動,不是取消就是延期,看到很多喜歡的鋼琴獨奏會都紛紛取消(今年是貝多芬250冥誕紀念,小貝先生表示哭哭),
Thumbnail
你還記得嗎?小時候拾起蠟筆在牆上塗鴉,或課堂上在古人臉上化妝。 我們都曾做過畫家,有一場天馬行空的創作夢,長大之後,夢醒了,你還記得嗎?     坐落於台中車站附近的Vision Art成立至今剛好六週年,和一般印象難以親近的藝術畫廊不同,從大面的玻璃窗就能將內部一覽無遺,它是以Art Jammi