Skip to content
Mac Peters edited this page Dec 21, 2020 · 1 revision

NUXT

Features

  • use latest js syntax without worrying about browser compatability (transpiled webpack)
  • nuxt-link to=“” ? - auto active class, prefetching, new features coming later. use this
  • Official/Community Modules: PWA (progressive web app), etc
  • use sass: npm i -D node-sass sass-loader
  • supports http2 when available (faster download of js)

Tips

  • app level/global css (to avoid repetition): https://nuxtjs.org/api/configuration-css/ - <style scoped> to apply css to only that template (minimal css loaded at a time, injected as needed on client and cached)
  • upgrade nuxt
    • package.json - change nuxt to nuxt-edge, latest,
    • remove node modules
  • npx nuxt == npm run dev
  • there’s new stuff you’d have to add script for if you want to use it
      • analyze after run build/start - show where resources are
  • override app.html if you want special meta tags for social media, add flags for ie9, - probably never use
  • in nuxt.config.js = can define route middleware that will apply to all pages (like a transition?) - not great for static site
  • running an existing app in a new machine - npm install
  • first load: console log in terminal because it’s rendering on the server. After, it shows in console
  • <img src“@/assets/nuxt.png”> ———

App Modes

universal:

- mode: 'universal', in nuxt.config.js
- webpack tracks the nuxt folder, which auto tracks pages,etc

static generated

  • npx nuxt generate (from any mode)
  • example hosted on netlify (nuxt docs)
  • not recommended if requent updates - takes time to build/generate, no no user sessions
  • great for static content: blog, gallery

SPA

  • client side only
  • not seo friendly
  • could take time to laod, loads html/js at beginning (slow first paint)

Routing

  • static files managed from the server
  • extend server routing using server middleware property (for api, oauth callback)
  • application routing - inspired by nextJS - vue routing
  • child pages: index.vue allows slug to be optional (direct to the index instead of any child if no slug present)
    • parent/children - lets you change only a part of the page rather than the whole thing (team - same url for each member)
    • nested routes changes entire page (blog posts, adding name of that blog post to the end of the url)