skip to content W3C SVG

Nuxt JS

Mar 28, 2020
Apr 24, 2020

IMAGE GALLERY (6)

progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS).

What is NUXT?

  • server side rendering SSR framework
  • Understand directory structure
  • Middleware -> access vuestore, fn before rendering a pages
  • Pages -> router
  • assets -> SASS
  • fetch is replaced with Anonymous middleware
  • Frontend Application
    • Server side Renderign SSR vs Client side Rendering CSR
    • asyncData (SSR) vs data (CSR)
    • Use proxy URLs to fix CORS errors

Thing you should know

  1. Add router links and dynamic links
  2. SEO meta tags to SPA
  3. Page navigation transitions
  4. i18n localization and globalization
  5. Code splitting
  6. universal Vue based websites, meaning you can build a fully static, SEO-ready, websites using all the features of Vue.js in terms of modern user experience.
  7. asyncData is called every time before loading the page component.
    1. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.
    2. This method receives the context as the first argument
  8. Nuxt axios integration

Which problems does nuxt solves?

  1. SEO optimization for SPA, SEO friendly
  2. Auto route creation as of new files addition under /pages
  3. standard project structure management
  4. can generate both static and dynamic websites with nuxt
    1. static generator
  5. Optimization for speed
npm i npx
npx create-nuxt-app <project-name>
npm install --save nuxt
yarn server --open
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

npm run build
npm run generate
axios.get(`http://someurl.com/${this.$route.params.id}`, config)
  1. Use backticks if you want to use variables in template

How is it different from vuejs?

NUXT Framework

  • SEO Advantages - custom heads, prebuild standard directory structure
    • hid: description to avoid duplicated meta tags
    • vue-meta for supported SEO properties
  • Less work managing routes
  • Universal Mode
    • Load the page after disabling javascript from browser
    • On each route, app loades route specific JS, CSS and component (HTML) files
  • Prefetching
    • prefetch js before clicked
  • vuex store
    • return an anonymous function

NUXT Markdown Blog

Own your content and Platform

  • Medium has terrible Page Perfromance
  • Headless CMS - API driven CMSs
    • Do you really need it? Use case?
  • Vue Components inside Markdown?, like hugo shortcodes
    • frontmatter-markdown-loader
  • How to import markdown, webpack? Else not going to work
    • import(~/content/${app.})

Footnotes