前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理，供日後參考。順序也許跟官網不太一樣，請多多包涵。 官方範例其實已涵蓋的大量情境，若是...
上一篇，在不知道 Nuxt 是什麼的情況下，使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...
前言 淺談 CSR、SSR 與 SSG的文中有提到，採用 SSR + SPA，將第一個畫面透過 SSR 產生，其他就交給 CSR 來做處理，既能兼具 SEO 還...
前言 現在的網站技術與前端框架的推進，使用 AJAX (Asynchronous JavaScript and XML) 技術發送 API 至後端進行資料獲取已...
關於 Universal Rendering 前一篇提到，原本前後端的 View 各自分開隨著前端漸漸吃重，為了讓畫面邏輯不需要分散各處，有人提出新的架構 -...
Vuetify 是一個基於 Vue 的 UI 框架， 類似於 Vuetify 的框架或函式庫有很多，例如： Element UI VueStrap...
這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半，得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js，新專案用 Vue-cl...
本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》，現成切好的版面很好找，參賽選手也不少，拿來說明與練習再適合不過。...
前言 在 Vue 中，我們會使用到 Vue Router 來實現切換頁面或路由的需求，而在 Nuxt 3 中，預設是沒有使用路由相關套件，直至建立了 pages...
前言 在我們使用完 Nuxt CLI 建立完專案後，其實就可以開始進行專案的開發，但是呢，相信不少人對於程式碼的排版都有自己的風格，不同人的 Coding St...
前言 隨著整個專案的開發，目錄與元件勢必也會越來越多，如同 Vue 3 的專案可能會有專門放置元件目錄 components 等，在 Vue 3 我們可能不太需...
這篇打算介紹 Nuxt 可運行模式與解決情境其中兩種靠調整設定，決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁產...
前言 身為前端工程師開發網頁，程式碼編輯器肯定必不可少，在這個系列將會使用 VS Code 進行開發，不過呢，也並沒有說一定非得使用 VS Code，所以說不論...
前言 本篇將介紹如何在 Nuxt 3 中建置 Server API，在這之前會先介紹一下 Nitro Engine 是什麼東西，Nitro 可能不多人聽過但與...
前言 為了後續範例程式在頁面呈現上能有比較好看的樣式，原先有想過使用 UI 框架或純寫 CSS，但是總覺得好像不夠潮，所以呢，我決定帶入近年滿熱門的 CSS 框...
前言 Nuxt 3 提供了一個布局模板 (Layouts) 的功能，可以讓你定義好布局模板後，在整個 Nuxt 中使用，舉例來說就很適合如上方有導覽列，下方是網...
前言 Cookie 在瀏覽網站時多會使用到，不論是用來儲存臨時的資訊或是辨識使用者等，這一個儲存在瀏覽器的一小段文字資料，會在每次發送 HTTP 請求時自動夾帶...
前言 在開發時，為了不重複造輪子，我們可能會在網路上找看看有沒有現成的套件可以做使用，如果這個套件在 Nuxt 3 沒有專用的模組或插件，那麼我們就只能依照套件...
前言 在 Nuxt 3 中提供了兩種可以方式設定環境變數或前端需要使用的共用設定，分別是在 Nuxt 啟動時會在後端載入使用的 Runtime Config 及...
前言 上一篇我們介紹了如何在 Nuxt 3 使用 useState 來建立一個元件間的共享狀態，隨著專案的健壯增大，我們就需要一個更好的方式來管理與儲存這些狀態...
前言 組合式函式 (Composables) 是一種利用 Vue 3 的 Composition API 來封裝和複用有狀態邏輯的函式，在 Nuxt 我們可以將...
客製 SEO 資訊 上一章讓登入頁有了基本樣貌，但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做？ 前端最基本的，在 埋對應的 Meta T...
這篇稍微介紹一下 nuxt.js 的設定檔： nuxt.config.js。 可以將以下專案 clone 下來，了解一下基本目錄結構。 github repos...
這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生，部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取，會碰到跨域 + CORS 問題。 為什麼需...
前言 在建立 Vue 的網站開發過程中，我們可能會自己封裝元件 (Component) 讓程式碼可以被重複使用，也方便開發者維護，這些一個個的元件，可以透過全域...
前言 當一個網站需要面向不同國家或不同語言的使用者，我們就需要做國際化 (Internationalization)，將網站內容進行翻譯或語言的對應，讓使用者能...
前言 Vue 3 父子元件間資料傳遞與讀寫或是跨元件間的狀態共享，可以選擇使用 Props / Emit、Provide / Inject 或 Vuex sto...
昨天有人問我引用圖片的路徑問題，答案整理成一篇補充雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源，Nuxt 依其...
前言 在 Vue 的專案內我們的頁面通常由 Vue Router 來控制路由及導航，Vue Router 提供了導航守衛 (Navigation Guards)...
前言 大家經過Nuxt 3 學習筆記這一系列文章，應該對於 Nuxt 3 有初步的理解，接下來我們將進入實戰部分，我將會以 Nuxt 3 來實作部落格網站，讓已...
Ralph
HunterLiu
Ryan
iThome鐵人賽
看影片追技術