👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 Nuxt 3 網站部署至 Vercel 流程 前往 Verc...
Nuxt 3 版本的升級 目前 Nuxt 3 仍積極的在修正錯誤與添加新功能，版本更新的速度也不慢，相較去年底，目前正式版釋出後已經穩定許多，與其他大型的開源框...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建構打包專案 使用 Nuxt CLI 的 build 指令來...
前言 Nuxt 3 除了是一個 SSR 的框架外，也能允許網頁使用混合渲染 (Hybrid Rendering)，混合渲染允許使用路由路徑的規則來決定不同的渲染...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 展示專案 我們使用實戰部落格系列所開發的範例程式碼：http...
前言 Nuxt 3 的網站應用程式，可以根據實際業務需求來決定渲染的模式，而最終專案所建構打包的專案程式碼，也會因為模式的選擇而需要部署在不同的執行環境上，例如...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 添加網站頁面的標題 調整 ./app.vue 檔案： <...
前言 Nuxt 3 的渲染模式，可以支援我們產生靜態的頁面，而這些預渲染的靜態網頁檔案，就很適合部署至靜態的託管平台來服務，例如 Cloudflare Page...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立路由中間件 在 middleware 目錄下建立一個檔案...
前言 網站開發過程與上正式環境後，難免會遇到一些 Bug 導致網站處理邏輯發生異常，甚至一小段的 JavaScript 的邏輯錯誤或未處理的拋出錯誤，可能導致整...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立伺服器中間件 在 server/middleware 目...
前言 不管在 Vue 與 Nuxt 的開發，常會有需要使用圖片或靜態資源的時刻，例如，已經具有外部的圖片連結，我們很輕易的可以使用 URL 等方式來做載入，若是...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立 Neon Serverless Postgres 資料...
前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n，已經在 RC 階段準備釋出正式版，在使用上也穩定不少，這篇文章將介紹一...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立預設布局模板與路由頁面 在 layouts 目錄下建立一...
前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n，已經在 RC 階段準備釋出正式版，在使用上也穩定不少，這篇文章將簡單的...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 Public 目錄 在 Nuxt 3 的專案根目錄下，存在一...
前言 網站的介面多多少少會放置圖示 (Icon)，圖示的載入方式可以像圖片一樣以 png、jpg、webp 或 svg 等圖片格式來呈現，本篇將介紹如何在 Nu...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 配置 Nuxt I18n 安裝 Nuxt I18n 套件 n...
前言 在搜尋引擎最佳化 SEO 中，其中有一個最佳化項目是結構化資料標記 (Structured Data Markup)，當你的網站設定好結構化的資料，將有助...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 使用 useCookie 來設定 Cookie 在 page...
前言 搜尋引擎之所以能搜尋到世界各底的網頁，全歸功於網路爬蟲 (Web crawler)，也有人稱之為網路蜘蛛 (Spider)，爬蟲是一種機器人即是搜尋引擎檢...
DAY 20 - Nuxt Devtools 超好用的開發者工具 現在無倫是哪個框架都有專屬於自己的 Devtools ，像是 Recat 有 React...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立 Google OAuth 用戶 ID 前往 Googl...
前言 Sitemap 網站地圖基本上都是由網頁開發人員進行製作，網站地圖內容包含了整個網站的連結，例如你的網站有首頁、文章列表、文章詳細頁面等，這些連結如果你想...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 使用 Runtime Config 開啟專案下 nuxt.c...
前言 在做網頁的 SEO 搜尋引擎最佳化時，你可以在 og:image 或 twitter:image 設定圖片的網址，來讓搜尋引擎爬蟲收錄網頁縮圖或在分享連結...
前言 當路由頁面跳轉時，可能會因為下一個頁面阻塞而導致畫面卡住，使用者無法得知頁面的載入狀況，Nuxt 3 提供一個 <NuxtLoadingIndica...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 安裝 Pinia 與 Nuxt Pinia 模組 在專案中安...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 建立路由頁面 在 pages 目錄下建立一個檔案 ./pag...
Ryan
阿蘇蘇
iThome鐵人賽
看影片追技術