¶ NuxtJS NOTES

A personal collection of Nuxt JS related information for easy review.

Twitter Feed

Awesome NuxtJS

¶ Good Stuff

• Now Builder for NuxtJS

  The Now Nuxt.js Builder takes a Nuxt.js application, defined by a nuxt.config.js entrypoint and deploys it to Now2 serverless environment.

  It features built-in caching of node_modules and yarn global cache (works even by dependency changes!) and multi-stage build for fast and small-sized deployments.

---

• Nuxt Optimized Images Automatically optimizes images used in Nuxt.js projects (JPEG, PNG, SVG, WebP and GIF).

  Docs

  Image sizes can often get reduced up to 60%, but this is not the only thing @bazzite/nuxt-optimized-images does:

  • Reduces image size by optimizing images during build.
  • Improves loading speed by providing progressive images (for formats that support it).
  • JPEG/PNG images can be converted to WebP on the fly for an even smaller size.
  • Can resize images or generate low-quality image placeholders (lqip) and extract the dominant colors of it.
  • Provides query params for file-specific handling/settings.
  • And supports these features already included in Nuxt.js:
    • Content hash to the file name so images can get cached on CDN level and in the browser for a long time.
    • Inlined small images to save HTTP requests and additional roundtrips.
    • Same URLs fo unchanged images over multiple builds for long time caching.

---

• responsive-loader A webpack loader for responsive images

  A webpack loader for responsive images. Creates multiple images from one source image, and returns a srcset. For more information on how to use srcset, read Responsive Images: If you’re just changing resolutions, use srcset.. Browser support is pretty good.

---

• Helmet for nuxt

  Easy Helmet integration with Nuxt.js Helmet helps you secure your Nuxt apps by setting various HTTP headers.

  By default Helmet will set the X-DNS-Prefetch-Control, X-Frame-Options, Strict-Transport-Security, X-Download-Options, X-Content-Type-Options and X-XSS-Protection headers. Beside that this module will also set by default the X-Permitted-Cross-Domain-Policies header.

---

• Nuxt.js basic auth module Provides basic authentication to your Nuxt.js application

  // nuxt.config.js
  module.exports = {
    // ...
    modules: [
      'nuxt-basic-auth-module'
    ],
    basic: {
      name: 'AUTH USER NAME HERE',
      pass: 'AUTH PASSWORD HERE',
      enabled: process.env.BASIC_ENABLED === 'true' // require boolean value(nullable)
    },
    // ...
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  

  ---

  • Nuxt-ImageMin

    Nuxt module to minify your images. Works with: png, jpeg, gif, and svg.

    Add nuxt-imagemin to your nuxt.config.js:

    { modules: ["nuxt-imagemin"]; }
    

    1
    

    Usage

    Put your images inside assets folder, for example: logo.png Then create an element to render it: <img src="~/assets/logo.png"> When you will bundle your app for production, nuxt will minify your image assets

  • Deploying a Nuxt Universal App to Azure