Nuxt.js is an open-source framework for building fast and powerful web applications. On June 18, Nuxt version 2.13 introduced improved support for static apps, making it possible to specify how apps in universal mode ({ mode:'universal'}
) are handled. Now there is a clear distinction bewteen how regular server-side rendered apps are handled versus static ones.
Let’s zoom in on this new full-static mode and explore some ways to harness its power when building your next static app with Nuxt.js.
Known issues with Nuxt.js
Before we dive into Nuxt 2.13, let’s briefly touch upon some of the issues that drove the aforementioned changes.
- Running
nuxt generate
rebuilds your entire app even if it’s not necessary, which slows down deployment times. - You can’t test the SPA fallback in development since the pages are only excluded when you run
nuxt generate
- Building modules or plugins for static apps is tedious because
process.static
istrue
only whennuxt generate
is run
Solution: The target
option
The target
option, available in Nuxt 2.13, enables you to explicitly specify how you want Nuxt to handle your app.
To set it in your nuxt.config.js
file:
export default { mode: 'universal', target: 'static' /* or 'server' */ }
Now, running your project in development mode with nuxt dev
will:
- Fall back to client-side rendering on 404, errors, and redirects
- Set
process.static
astrue
Note: The full-static mode does not work when the mode
is set to spa
. To use it, you have to change your mode
to universal
and the target
to static
. The default value for target
is server
, so if the target
option is omitted, it will always be server
.
Let’s look at some other ways Nuxt 2.13 helps address the problems listed above.
No more build delays
For full-static apps, Nuxt does not need to rebuild the entire project if there are no changes in your code. When nuxt generate
is run (available in >= v2.14), Nuxt is smart enough to use the previous build cache during deployment. This improvement accelerates deployment by approximately 3.6 times.
Faster load times
All pages are now prerendered with mode:'universal'
and target:'static'
to HTML. HTTP requests with asyncData
and fetch
are made and stored in JS files to be used on client-side navigation, so there really aren’t any HTTP requests being made when you navigate to these pages.
Run production site locally
When you run nuxt generate
to generate your static pages in the /dist
folder, you can use nuxt start
to spin up a production server for your static app. This is perfect for testing locally before deploying to a static host.
Generation config
You can now configure how your static apps are generated with the generate
property in nuxt.config.js
.
Excluding files from the cache
You can choose to ignore specific directories in your project so when changes happen, they will not trigger any builds.
export default { generate: { cache: { ignore: ['guides'] // changes in the guides folder will not cause a re-build } } }
By default, the cache ignores the following files and directories.
dist/
.nuxt/
static/
.env
,.npmrc
, and other dotfilesnode_modules
README.md
Crawler
In previous versions (<= v2.12), you had to manually add dynamic links in the generate.routes
option in your nuxt.config.js
file. Nuxt 2.13 comes with a built-in crawler that automatically detects relative links and generates pages for them.
If you want the crawler to skip generation for some routes, you can use generate.exclude
and specify the route’s regular expressions or strings. If you want to disable the crawler, set generate.crawler
to false
.
// in nuxt.config.js file export default { generate: { crawler: false } }
If, for some reason, the crawler can’t generate some pages, you can use the generate.routes
option to add them yourself.
Next steps
Now that we’ve covered the static portion of the new features introduced in Nuxt 2.13, its time to use them to improve your apps.
Below are some steps you can take to go full-static in your next Nuxt project.
- Upgrade to Nuxt v2.14
- Ensure the
target
is set tostatic
in yournuxt.config.js
file - Switch your commands in the
scripts
option in yourpackage.json
file to look like this:"scripts": { "dev": "nuxt", "generate": "nuxt generate", "start": "nuxt start" }
-
nuxt dev
will start the development server and will be aware if you are running in static mode or notnuxt generate
will generate the static pages to a folder called/dist
nuxt start
will spin up a production server to serve your static app
Head over to GitHub for more on features and bug fixes introduced in the most recent Nuxt releases.
Get set up with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID
- Install LogRocket via npm or script tag.
LogRocket.init()
must be called client-side, not server-side - (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- NgRx middleware
- Vuex plugin
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>