Hi Im using Nuxt JS for my project and I noticed that my js files are getting rather big
And my question is how can I make it smaller or split vendor or js files that are over 1mb
Also I have seen that font-awesome is also taking a lot of space
How can I remove all of this unecessary libraries and make js files smaller ?
Font awesome is: 200KB
free-solid-svg-icons: 194KB
vendor.app: 1MB
This is how I was able to shave off 1+ MB
First, if you are using nuxt-fontawesome module, remove it. I was not able to figure out how to optimize it, even if I explicitly listed the icons I cared about.
Instead, I created a font-awesome plugin and used the library as mentioned in the README.
font_awesome_icons.js
import Vue from 'vue'
import { library, config } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faGem } from '#fortawesome/free-regular-svg-icons/faGem'
import { faFacebookF } from '#fortawesome/free-brands-svg-icons/faFacebookF'
import { faUser } from '#fortawesome/free-solid-svg-icons/faUser'
library.add(faGem, faFacebookF, faUser)
Vue.component('font-awesome-icon', FontAwesomeIcon)
nuxt-config.js
// ...
plugins: [
{ src: '~/plugins/font_awesome_icons.js', mode: 'client' }
],
// ...
index.vue
<template>
<font-awesome-icon :icon="['fab', 'facebook-f']" />
</template>
<script>
export default {
}
</script>
<style>
</style>
Before
After
Related
I've noticed that if I want to use my _variables.scss I have to import them in every Vue file. My question is, how can I check if I load the same styles multiple times or does Vue saves only once the same scss files on compiling?
This is my code in multiple view files.
<style lang="scss" scoped> #import '~#/abstracts/_variables.scss'; #import '~#/pages/_profile.scss'; </style>
I import _variables.scss in every view where I want to use my scss variables.
This depends on how you have your project setup, for example if you're using webpack you can do something like this where you have your CSS loaders setup:
scss: generateLoaders('sass', {
additionalData: `
#import "#/styles/_variables.scss"
`,
}),
Or if you have a vue.config.js you can do this:
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/assets/scss/main.scss"
`
}
}
}
}
Then you will have access to this global SCSS file everywhere in your Vue application.
Side note on the additionalData portion - that will depend on the version of sass loader you're using:
For ^7.x.x use data, and for ^8.0.2 use prependData, finally for 9.0.0+ use additionalData
I have a project which uses MaterialDesignIcons in Nuxt with Vuetify.
Today I switch completely with all tags to the JS loading type:
https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons-js-svg
<v-icon>{{ mdiCheck }}</v-icon>
(...)
import { mdiCheck, mdiCart } from '#mdi/js'
(...)
data() {
return {
mdiCheck,
mdiCart,
my problem is, that after yarn build / start the loading of the css file from cdn don't stop.
How can I see why this is still loaded and how to fix this?
In Head HTML:
It's a problem with the nuxt plugin for vuetify.
As you can see in their docs they by default load the Roboto font and Material Design Icons. Difficult to spot but easy to fix:
In nuxt.config.js set defaultAssets: false in the vuetify configuration:
vuetify: {
defaultAssets: false,
icons: {
iconfont: 'mdiSvg',
}
}
I have a lot of SVGs in my site and they have lots of paths so I don't want to clutter my code with them, but display the full code in the browser.
In PHP there's a magic function called file_get_contents('path')
Is there an alternative to this in Nuxt? So far the only option is to serve it as a regular img tag which prohibits all styling.
Check out the #nuxtjs/svg module (NPM). Using that module you can import your svgs in your script and use them like components in your template.
<template>
<NuxtLogo class="logo" />
</template>
<script>
import NuxtLogo from "~/assets/nuxt.svg?inline";
export default {
components: { NuxtLogo },
};
</script>
<style scoped>
.logo {
fill: #fff;
}
</style>
I'm using CSS Modules with Nuxt and have run into some issues when trying to import a stylesheet in my js. If I import my stylesheet directly into the...
<style module>
#import './index.css';
</style>
...everything works as expected. In my particular case I need to run a computed property to choose between two different stylesheets so instead of importing through the <style module> I need to import into <script> and implement the styles like so:
<script>
import foo from './index.css'
export default {
computed: {
styles() {
return foo
}
}
}
</script>
When implementing this on vue everything works great and I get a style object returned. Nuxt however is returning an empty object and none of my styles render correctly.
I'm activating CSS-Modules in my nuxt.config.js file like this:
export default {
...
loaders: {
css: {
modules: true
}
}
...
}
Is this an issue with Nuxt SSR? I've been looking for the root cause/solution but haven't had much luck in my search.
Update
After taking ivandata's advice and adding to my build script this code:
export default {
....
build: {
extend (config, ctx) {
const cssLoader = config.module.rules.find(rule => {
return rule.test.toString() === '/\\.css$/i';
});
delete cssLoader.oneOf[0].resourceQuery;
...
}
}
}
CSS modules appear to be working but a new problem popped up which is that now the project doesn't understand any vue-component styles that are not css-modules. After doing a bit of research I found out that the resourceQuery is telling the loader what type of file to apply the loader options to.
I've tried digging through the style loader on vue.cli 3 and comparing the differences to Nuxt. I removed ivandata's snippit and I tried matching the loaders of vue and nuxt but the problem still persisted.
Here is what is happening visually when between enabling and disabling ivandata's code:
Disabled
Enabled
And here is a code snippet of what is going on in my project:
<template>
<section :class="style.container">
<h1>hey</h1>
<h2 class="test">hey</h2>
</section>
</template>
<script>
import style from './index.css'
export default {
computed: {
style() {
return style
}
}
}
</script>
<style>
h1 {
font-size: 100px;
}
.test {
font-size: 100px;
}
</style>
So as you can see if I have the resourceQuery in the css-loader my javascript import's of css do not work but all vue-component styles worked as normal. Once I remove the resourceQuery the js imported stylesheet works but the vue-template style classes no longer work. I don't think the solution lies in removing resourceQuery and I'm curious if this has something to do with another loader entirely. I've dug quite a bit through the vue.cli 3 loaders and can't see anything that distinctly sticks out to me.
Ok this another way. Leave your old code. Remove my code and add ?module to import file path:
<script>
import foo from './index.css?module'
export default {
computed: {
styles() {
return foo
}
}
}
</script>
I was wrong. resourceQuery option is used to test against the query section of a request string.
You don't need activate css-modules in nuxt, they active by default.
Nuxt.js use vue-style-loader for load styles.
https://vue-loader.vuejs.org/guide/css-modules.html#opt-in-usage
By default, all styles loading from style tag with module attribute, because style loader use resourceQuery /module/ in oneOf rule. So if remove this property nuxt will load styles as you want.
export default {
....
build: {
extend (config, ctx) {
const cssLoader = config.module.rules.find(rule => {
return rule.test.toString() === '/\\.css$/i';
});
delete cssLoader.oneOf[0].resourceQuery;
...
}
}
}
nuxt version: 2.0.0.
You need to do nothing but exchange scoped to module,such as:
<template>
<div :class="$style.red">TEST</div>
</template>
<style module>
.red{color:red;}
</style>
I'm trying to import element UI into Nuxt.js and on their twitter account they linked to glitch (https://glitch.com/edit/#!/nuxt-element-ui?path=layouts/default.vue:1:0) that has the important files listed. In the default.vue you it has this listed
<template>
<div>
<nuxt/>
</div>
</template>
<style src="element-ui/lib/theme-default/index.css"></style>
I imported element ui into my nuxt project by running:
npm i element-ui --save nuxt
searched for index.css in the folder and copy-pasted that link as a source to the style src (node_modules\element-ui\lib\theme-chalk\index.css) for the default.vue file but I am getting an error that it can not locate it.
I also tried to use the cdn style file from element ui's website:
https://unpkg.com/element-ui/lib/theme-chalk/index.css
Both of them are resulting in "Module not found"
What am I doing wrong? Any other place that has anything listed on how to import element ui into nuxt?
Global CSS should be defined in css section of nuxt.config
e.g.
module.exports = {
css: [
{ src: '~/assets/index.css', lang: 'scss' },
],
｝
and CDN stylesheet should be defined in head.links
head: {
link: [
{ rel: 'stylesheet', href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' },
],
},
Read:
https://nuxtjs.org/api/configuration-css
https://nuxtjs.org/api/configuration-head
Inside your style, you can import it like this:
<style>
#import '~element-ui/lib/theme-default/index.css'
</style>
But you can also import it directly from your javascript:
import 'element-ui/lib/theme-default/index.css';