前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理，供日後參考。順序也許跟官網不太一樣，請多多包涵。 官方範例其實已涵蓋的大量情境，若是...
上一篇，在不知道 Nuxt 是什麼的情況下，使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...
關於 Universal Rendering 前一篇提到，原本前後端的 View 各自分開隨著前端漸漸吃重，為了讓畫面邏輯不需要分散各處，有人提出新的架構 -...
這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半，得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js，新專案用 Vue-cl...
本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》，現成切好的版面很好找，參賽選手也不少，拿來說明與練習再適合不過。...
圖片來源 Vuetify 簡介 Vuetify 是一個語意化元件的前端框架，提供簡潔、直觀、易於重複使用的元件，使 Vue 的開發者可以輕鬆解決前端的問題。...
什麼叫做 SSR? Server-Side Rendering，頁面由後端渲染，HTML由後端產生 傳統做法整頁HTML不就完全由後端產生嗎？ 使用後端...
前一章我們新增 /pages/product.vue編輯即可在 http://localhost:3000/product 預覽頁面。 pages/ --| p...
最近在 Frontend 技術圈裡，Server-Side-Rendering（SSR） 可說是一個越來越火熱的概念，剛好現在工作上的架構就是使用 Next.j...
這篇打算介紹 Nuxt 可運行模式與解決情境其中兩種靠調整設定，決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁產...
稍有經驗的開發者，可能對最近 SPA，SSR 等術語不太陌生，大概也能知道 SPA 指的是單頁式應用（Single Page Application）、SSR...
客製 SEO 資訊 上一章讓登入頁有了基本樣貌，但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做？ 前端最基本的，在 埋對應的 Meta T...
前一章經 create-nuxt-app 生成的專案結構 放法按照 Nuxt 預設結構，相比 Vue.js 專案，已經幫你訂好了規則，方便對應與依循各資料夾對...
這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生，部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取，會碰到跨域 + CORS 問題。 為什麼需...
昨天有人問我引用圖片的路徑問題，答案整理成一篇補充雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源，Nuxt 依其...
圖片來源 延續昨天的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...
這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異，透過命令 $ yarn generate /* npm run gene...
嗨大家！連假第一天過得如何？～ 今天想跟大家分享的主題是各種網頁渲染模式，就是 SSG、SSR、CSR、ISR。長得都差不多，可是細節都不太一樣，在決定要用哪一...
Nuxt 以 Universal 模式運行下，後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...
這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」 用來補充頁面細部設定 asyncData 在執行順序中，排在頁面渲染(render)前，回...
Nuxt 頁面元件跟 Vue File 哪裡不同？ Nuxt Routing 自動映射介紹過，/pages 的 Vue File 對應各個頁面。 雖然寫法一樣，...
這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」 用來補充頁面細部設定 複習一下 Nuxt 收到請求後的處理流程 asyncData 和 fetc...
接下來幾篇都屬頁面客製，這篇講「Nuxt 發生錯誤時，他怎麼判斷與反應」 先回顧這張流程圖 Nuxt 收到請求時，會經過這麼多步驟 而碰到不可預期的錯誤或頁面...
上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段，並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格，需要載...
前一天介紹了 SSR 基本概念，今天則是要介紹 React 最有名的 SSR 框架：Next.js。 今天不是要來講 Next.js 怎麼使用，畢竟網路上學習資...
本篇要回溯「Nuxt 請求處理流程」，介紹 validate() 前一步驟 - Middleware Middleware 中文翻譯為 中介軟體、中間件、中介...
複習一下 asyncData 動態產生頁面，作業得透過 axios 拉 product api，藉此產生商品頁面的情境 安裝 Axios $ yarn add...
前幾篇提過頁面細部設定，對某一頁調 <head>、改 transition等細部調整。 有些調整，突然 PM 希望套用到整個網站，該怎麼辦？而前文介...
這篇是頁面客製段落其二，主題講「Nuxt 頁面讀取效果如何調整」 用來補充頁面細部設定 讓我們回想錯誤頁面，是用來「呈現錯誤狀態的頁面元件」 而頁面渲染前，N...
Nuxt Axios 模組 - @nuxtjs/axios ，是官方推薦使用的 HTTP Client Module主要功能及組成有 axios 提供 HT...
Ralph
HunterLiu
莫力全 Kyle Mo
Gary
Jade
iThome鐵人賽
看影片追技術