Nuxt.js Lazy Loading 圖片延遲載入

Nuxt ｜ 2023-02-02

Lazy Loading 是常見的圖片優化技巧，在使用大量圖片的網站尤其適用，可以提升網頁載入速度，節省流量的浪費，Google Lighthouse 也顯示此為有效提升評分的方式，言下之意會影響到 Google 搜索排名，本文介紹如何搭配套件 lazysizes 使用。

Nuxt.js 自訂頁面 Loading 效果

Nuxt ｜ 2022-12-29

Nuxt.js 提供了預設的進度條效果，當切換路徑時會自動顯示。我們可以自由地調整進度條的樣式、關閉進度條，或者進行客製化介面設計。

設定 Loading 樣式

1. 關閉 loading 效果

全域關閉效果

// nuxt.config.js
export default {
    loading: false
};

Nuxt.js 套件應用：Masonry 打造瀑布流版面

Nuxt ｜ 2022-12-23

前端網頁開發想必對瀑布流版面不陌生，能夠快速的幫我們達成 RWD 區塊排版，其中最有名的就是 masonry-layout 這套 javascript 套件。

Nuxt.js 套件應用：Bootstrap 5 搭配 SCSS 打造網頁 UI

Nuxt ｜ 2022-12-22

Bootstrap 是一款相當熱門的前端開發工具，可以幫助我們快速的設計跟自訂 RWD 網站，過去 Bootstrap 相依於 jQuery 開發，Bootstrap 5 不需使用 jQuery，新增 Utilities API，可以更簡易的管理或擴充樣式，讓程式碼更輕量，另外也新增了 Bootstrap Icons 供免費使用。

透過 create-nuxt-app 建置 Nuxt.js 專案時，雖然可以選擇 CSS 模板（UI framework），但選項內並沒有 Bootstrap （Bootstrap Vue 搭配的是 Bootstrap 4.5），因此需手動安裝。

Nuxt.js 實作 301 轉址（301 Redirect）

Nuxt ｜ 2022-12-18

301 轉址又稱為重新導向，將指定網址導向另一網址，在網站結構更新、網站搬遷時常會使用到，當用戶輸入舊網址時，會自動跳轉到新網址。

轉址跟 SEO 的關係

如果需轉址的網頁已經經營許久，如果沒有設定轉址，過去累積的頁面權重和流量不會跟著轉移，新的網站必須重新累積，且搜尋引擎可能會出現重複內容，將會影響 SEO 排名。

Nuxt.js 套件應用：VeeValidate 表單驗證

Nuxt ｜ 2022-12-17

vee-validate 是使用於 Vue.js 的輕量表單驗證套件（參考 php 框架 laravel 表單驗證所開發），僅需在表單上加入簡易語法就能進行驗證，執行：npm i [email protected]

新增 plugins/vee-validate.js，在 nuxt.config.js 配置

// nuxt.config.js
export default {
  plugins: [
    { src: '@/plugins/vee-validate.js', mode: 'client' }
  ]
}

Nuxt.js 替網站增加 sitemap 網站地圖

Nuxt ｜ 2022-12-15

當我們的新網站上線，外部連結少，或是網站規模很大時，透過 sitemap 網站地圖，可以讓 google 搜尋引擎爬蟲可以更快速的了解我們的網站上有哪些網頁並加以收錄，並建立索引，提升網頁出現的機率。

我們可以透過 @nuxtjs/sitemap 來快速建立 sitemap，執行：npm i @nuxtjs/sitemap

Nuxt.js 設定 GA & GTM

Nuxt ｜ 2022-12-14

網站上線後，我們會需要 Google Analytics 和 Google Tag Manager 工具來追蹤分析網站流量，接下來說明如何在 Nuxt.js 專案內加入追蹤碼。

Google Analytics

申請代碼：

至 Google Analytics 分析，使用 google 帳戶登入，點選左下角的管理

Nuxt.js Meta Tags and SEO

Nuxt ｜ 2022-12-10

在 Vue.js 專案，我們可以直接在 index.html <head> 設定全站共用的 meta tags，那在 Nuxt 又該怎麼設定呢？

Nuxt.js 藉由 vue-meta 來更新應用內的 head 設定跟 meta 屬性，使用 create-nuxt-app 建構專案會自動安裝，我們可以在頁面定義不同的內容，幫助搜尋引擎爬蟲掌握頁面內容，提升 SEO。

Nuxt.js 套件應用：CKEditor 5 文字編輯器

Nuxt ｜ 2022-12-01

CKEditor 是一套歷史悠久且功能完整、輕量的富文本編輯器（rich text editor），為使用者提供所見即所得（WYSIWYG）的編輯區域，CKEditor 5 與舊版不同，使用 MVC 架構、ES6 編寫、UI 簡潔，且因應現在的前後端分離趨勢，與前端框架 React、Angular、and Vue.js 做整合，讓我們可以更便利的開發應用。

Nuxt

設定 Loading 樣式

1. 關閉 loading 效果

轉址跟 SEO 的關係

Google Analytics

申請代碼：

Your browser is out-of-date!