前言 在 Nuxt 3 中提供了兩種可以方式設定環境變數或前端需要使用的共用設定,分別是在 Nuxt 啟動時會在後端載入使用的 Runtime Config 及...
前言 上一篇我們介紹了如何在 Nuxt 3 使用 useState 來建立一個元件間的共享狀態,隨著專案的健壯增大,我們就需要一個更好的方式來管理與儲存這些狀態...
前言 Vue 3 父子元件間資料傳遞與讀寫或是跨元件間的狀態共享,可以選擇使用 Props / Emit、Provide / Inject 或 Vuex sto...
前言 現在的網站技術與前端框架的推進,使用 AJAX (Asynchronous JavaScript and XML) 技術發送 API 至後端進行資料獲取已...
前言 本篇將介紹如何在 Nuxt 3 中建置 Server API,在這之前會先介紹一下 Nitro Engine 是什麼東西,Nitro 可能不多人聽過但與...
前言 在 Vue 的專案內我們的頁面通常由 Vue Router 來控制路由及導航,Vue Router 提供了導航守衛 (Navigation Guards)...
前言 在使用 Nuxt 開發過程中,我們可以透過配置模組 (Modules) 或插件 (Plugin)來進行擴充,在[[Day 11] Nuxt 3 插件 (P...
前言 在開發時,為了不重複造輪子,我們可能會在網路上找看看有沒有現成的套件可以做使用,如果這個套件在 Nuxt 3 沒有專用的模組或插件,那麼我們就只能依照套件...
前言 組合式函式 (Composables) 是一種利用 Vue 3 的 Composition API 來封裝和複用有狀態邏輯的函式,在 Nuxt 我們可以將...
前言 在建立 Vue 的網站開發過程中,我們可能會自己封裝元件 (Component) 讓程式碼可以被重複使用,也方便開發者維護,這些一個個的元件,可以透過全域...
前言 Nuxt 3 提供了一個布局模板 (Layouts) 的功能,可以讓你定義好布局模板後,在整個 Nuxt 中使用,舉例來說就很適合如上方有導覽列,下方是網...
前言 在 Vue 中,我們會使用到 Vue Router 來實現切換頁面或路由的需求,而在 Nuxt 3 中,預設是沒有使用路由相關套件,直至建立了 pages...
前言 隨著整個專案的開發,目錄與元件勢必也會越來越多,如同 Vue 3 的專案可能會有專門放置元件目錄 components 等,在 Vue 3 我們可能不太需...
前言 為了後續範例程式在頁面呈現上能有比較好看的樣式,原先有想過使用 UI 框架或純寫 CSS,但是總覺得好像不夠潮,所以呢,我決定帶入近年滿熱門的 CSS 框...
前言 在我們使用完 Nuxt CLI 建立完專案後,其實就可以開始進行專案的開發,但是呢,相信不少人對於程式碼的排版都有自己的風格,不同人的 Coding St...
前言 大家好,我是 Ryan,這篇文章是我參與 iThome 2022 鐵人賽 [Day 04] Nuxt 3 + TypeScript + ESLint +...
前言 身為前端工程師開發網頁,程式碼編輯器肯定必不可少,在這個系列將會使用 VS Code 進行開發,不過呢,也並沒有說一定非得使用 VS Code,所以說不論...
前言 淺談 CSR、SSR 與 SSG的文中有提到,採用 SSR + SPA,將第一個畫面透過 SSR 產生,其他就交給 CSR 來做處理,既能兼具 SEO 還...
參考文章禁用和启用google翻译 首先有兩個步驟: head 內加入 meta 標籤 <meta name="google"...
這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生,部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取,會碰到跨域 + CORS 問題。 為什麼需...
Nuxt 以 Universal 模式運行下,後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...
第 30 天,聊一下開始玩 Nuxt 的緣由(本來想寫整合 API 服務,發現內容前面沒提觀念太多,有點跳) 一開始嘗試處理 SEO 混著後端框架寫 Vue (...
前一篇介紹靜態頁部署,若換成 Universal Mode 呢? 「需要個 Node Server,不時讓人戳」 當工程師懶得管機器 (或你分身乏術),想把環境...
這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異,透過命令 $ yarn generate /* npm run gene...
Nuxt Axios 模組 - @nuxtjs/axios ,是官方推薦使用的 HTTP Client Module主要功能及組成有 axios 提供 HT...
Nuxt 不像 Angular 這種大型框架,功能包山包海,核心功能不夠得自行擴充。雖然提過如何透過全域/頁面設定客製、用 Plugin 收納初始化片段,但對於...
上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段,並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格,需要載...
複習一下 asyncData 動態產生頁面,作業得透過 axios 拉 product api,藉此產生商品頁面的情境 安裝 Axios $ yarn add...
這篇打算為 Nuxt 內建元件收尾,介紹最後兩種 <nuxt-child> <nuxt> 回顧上一章,巢狀路由讓 slug...
Nuxt 路由入門 篇介紹過兩層動態路由 pages/ --| _slug/ -----| comments.vue -----| index.vue --|...