版本：nuxt 2.15.8

網站開發常使用到輪播功能，Swiper 是一款基於 js 開發、功能完整實用性高的輪播套件，本篇將介紹如何在 Nuxt.js 專案內搭配 Vue 整合套件 vue-awesome-swiper 實作輪播動畫

閱讀更多

版本：nuxt 2.15.8

Nuxt 最大的特點就是 Server Side Render，因此他有獨立的生命週期，來看一下官方提供的圖片：

閱讀更多

版本：nuxt 2.15.8

前情提要一下，在 Vue 的專案下，常會需要做父子元件或是頁面之間的溝通傳值，如果說只是單層（ex：父元件 → 子元件、子元件 → 父元件、頁面 → 頁面），我們可以很簡單的使用 props 、 emit 或 event bus 即可，但在大型專案，共用資料就不是如此單純，可能會有元件內含元件、多層級的溝通，如果只用上述方法，對於開發及除錯都不便利，如下圖範例，元件 1-1 跟元件 2-1 的溝通相對複雜。

閱讀更多

版本：nuxt 2.15.8

Axios 是一套相當便利的 Promise Base Ajax 套件，而 Nuxt 又有 Axios 整合套件 @nuxtjs/axios，此篇範例會使用到 Async、Await，如果對於 Promise 尚不熟悉，可以參考 Promise 介紹文章

閱讀更多

版本：nuxt 2.15.8

全名為 Nuxt configuration file，功能同 Vue 專案內 vue.config.js 檔，如果我們使用 create-nuxt-app 來建置專案，會自動產生這支檔案，在此配置的內容，會全域讀取設定。

接下來介紹一下一些常用的設定：

閱讀更多

版本：nuxt 2.15.8

使用 create-nuxt-app 安裝完成後，可以看到以下的資料夾結構：

assets, layouts, middleware, mixins, plugins 以上資料夾在當前版本是需要手動建置的，

依照順序介紹各資料夾功能：

閱讀更多

版本：nuxt 2.15.8

說到 Nuxt，必須先從 Vue.js 說起，Vue.js 為專注在視圖層(View) 的 JS 框架，為 SPA（Single Page Application）應用程式，簡而言之整個網站應用只有單一頁面，一但頁面被加載進來後，就不會再進行該頁面請求，由於 Vue 是利用 JS 載入資料，並動態產生元件，SEO 只能抓取到 HTML 內容，因此 SEO 表現趨近於零。

而 Nuxt 是基於 Vue.js、Node.js、Webpack 以及 Badel.js 的輕量框架，可以同時創建 SSR（Server Side Render）及 SPA，在頁面載入前即渲染（伺服器回傳完整 HTML 檔，每次跳轉頁面，瀏覽器都需要刷新），搜尋引擎爬蟲可以取得資料，大幅解決 SEO 的問題。

以下圖片說明：

閱讀更多