Nuxt.js, a Vue.js framework, recently released version 2.11.0 to provide better control over the removal of non-client or non-server code in third-party dependencies. Nuxt 2.11 also adds flexibility with conditional statements supporting the run-time evaluation of application templates.
Prior to Nuxt 2.11, developers could not use conditions within a Nuxt application template. Nuxt would load app.html with the Webpack HTML plugin, to internally evaluate templates. With this approach Nuxt could not evaluate templates like <% if (something) { %> ... <% } %> at run time. Instead, this code was code evaluated at build time.
Nuxt 2.11.0 removes this limitation through its new support for evaluating application templates at run-time, giving more flexibility to application developers, through a new block for run-time evaluation:
<html>
<head>
{{ HEAD }}
{% if (ENV.NODE_ENV === 'dev') { %}
<!-- debug scripts -->
{% } else if (ENV.NODE_ENV === 'production') { %}
<!-- production scripts -->
{% } %}
</head>
<body>
{{ APP }}
</body>
</html>
Nuxt provides process.client and process.server configuration options that take care of separating client-side and server-side code. However, prior to Nuxt 2.11, developers could not easily manage client vs. server control within third-party dependencies. Now, with the optional removal of non-client or non-server code, the Webpack DefinePlugin will set the typeof window check to object on the client and undefined on the server, allowing source code to get removed by Webpack where appropriate.
In Nuxt 2.11.0, to improve performance, contenthash is now a preferred choice over chunkhash for better long-term caching. Chunkhash is the hash of the complete chunk while contenthash is the hash of the content of the file, which is different for each asset and this makes it a better way of identifying a file if the contents do not change. Using contenthash means that assets (like images or fonts) that are unlikely to change between deploys can be cached more efficiently.
In recent versions of Nuxt.js, on the client-side Nuxt would create a synthetic route initially, before VueRouter has initialized, so that plugins and middleware have something to work with at that early rendering stage. However, the initial route was created without taking the router's mode into consideration, creating a route with a normal path rather than a hash-based path. This confused nuxt-i18n's logic for redirecting users to the correct locale on initial navigation.
This bug gets fixed by passing the router mode to the getLocation function which now gets the correct path value as shown below.
Before Nuxt 2.11.0:
const path = getLocation(router.options.base)
Nuxt 2.11.0:
const path = getLocation(router.options.base, router.options.mode)
In previous versions of Nuxt, specifically in Nuxt 2.10.2, nested child routes were getting duplicated forward slash characters at the end of the path.
/about//contact/
In Nuxt 2.11.0, setting the trailingslash property of nested routes to true will no longer get double forward slash paths. Nested routes have the correct path structure as intended.
/about/contact
Also, the @nuxtjs/eslint-config dependency was updated to version 2.0.
To learn more about Nuxt.js version 2.11.0, refer to the Nuxt.js 2.11.0 release notes. Nuxt is a 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).
Nuxt.js is available as open source software under the MIT license. Contributions are welcome via the Nuxt.js GitHub repository. Contributors should follow the Nuxt.js contribution guidelines.
