Last updated: 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
fetchis 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
- Add router links and dynamic links
- SEO meta tags to SPA
- Page navigation transitions
- i18n localization and globalization
- Code splitting
universalVue 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.
asyncDatais called every time before loading the page component.
- It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.
- This method receives the context as the first argument
- Nuxt axios integration
Which problems does nuxt solves?
- SEO optimization for SPA, SEO friendly
- Auto route creation as of new files addition under
- standard project structure management
- can generate both static and dynamic websites with nuxt
- 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
- Use backticks if you want to use variables in template
How is it different from vuejs?
- SEO Advantages - custom
heads, prebuild standard directory structure
hid: descriptionto avoid duplicated
- vue-meta for supported SEO properties
- Less work managing routes
- Universal Mode
- On each route, app loades route specific JS, CSS and component (HTML) files
- 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
- How to import markdown, webpack? Else not going to work
- SVG Footer in vue blog