Nuxt Assets
#22012
Replies: 4 comments 3 replies
-
These are great! |
Beta Was this translation helpful? Give feedback.
0 replies
-
How will this works with nuxt/fonts and nuxt/scripts? |
Beta Was this translation helpful? Give feedback.
2 replies
-
@font-face {
src: local("Lato"), url("https://external.cdn.com/fonts/Lato.ttf");
}
import logoNuxt from 'https://external.cdn.com/images/nuxt.svg'
const badge = { label: 'nuxt', image: logoNuxt }
|
Beta Was this translation helpful? Give feedback.
1 reply
-
Hum so basically you create modules that are intern with global config ? or will this be different from a module ? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Nuxt Assets RFC
Summary
Often users need to reference third-party assets (like fonts or scripts) that are effectively dependencies of their built application. These third-party dependencies can often contribute to negative performance, whether because they are hosted with different caching strategies, because they are render-blocking when loaded, or simply because the browser needs to perform a request to a different origin.
The
nuxt/assets
integration is a new addition to the Nuxt framework that allows developers and modules to handle loading third-party assets.Nuxt will ship with support for different types of assets to be handled out-of-the-box, but modules can also register their own strategies for handling assets.
Implementation
Nuxt will expose a new top-level configuration option:
assets
, with a number of properties. An ad-hoc module,nuxt/assets
, will be automatically enabled and will handle the implementation and configuration.Strategies
By default, the following strategies will be available:
public
This is a build-time strategy that will download resources and include them in your app's static files. Assets will be cached between builds to save on network bandwidth.
Inspirations: https://github.com/antfu/vite-plugin-remote-assets and https://github.com/nuxt-modules/google-fonts
bundle
This is a build-time strategy that will transparently download resources and include them in the build. This will enable tree-shaking and other transforms of the remote resources. Assets will be cached between builds to save on network bandwidth.
proxy
This is a runtime strategy that will transparently proxy access to resources through the runtime Nitro server. (It is not compatible with a static website in most cases, though on some static providers, like Netlify and Vercel, this will be possible as well.)
Custom strategies
You can register your own strategies too.
API
You (or modules you use) can register rules to enable asset strategies for particular resources. By default Nuxt provides the following shortcuts to configure default behaviour, though this can be customised.
Beta Was this translation helpful? Give feedback.
All reactions