I have two layouts inside layouts folder: default.vue and projects.vue. The content of the layouts is not relevant.
The thing is I'm trying to apply layout transitions between two pages index.vue and about.vue using the default layout.
I am following the documentation: I have created an app.vue file with the following code:
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<style>
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
filter: grayscale(1);
}
</style>
and then I added the property to my nuxt.config.ts file, like this:
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' }
},
})
But it doesn't work. I have also tried with the property pageTransition instead layoutTransition and it works (don't know why).
It seems that the CSS classes for the layout are not applied if I inspect the code. I have also tried to add the classes inside the tailwind.css file with no result.
I had the same issue.
I created a main.css in /assets/css and added this to nuxt.config.ts
css: [
'#/assets/css/main.css',
],
In main.css I added the CSS transitions as you have above.
Related
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 am using Razorpay for my payment service. Other than the checkout page, no page is using it. I have included it in nuxt.config.js file. Is it possible in nuxtjs to use a script only where you might need it? not in all pages. (My lighthouse score is degrading due to this)
Yes, it is possible. You can use the Local Settings to include your resources in your .vue file inside the pages/ directory (here in the head function):
<template>
<h1>About page with jQuery and Roboto font</h1>
</template>
<script>
export default {
head () {
return {
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
]
}
}
}
</script>
<style scoped>
h1 {
font-family: Roboto, sans-serif;
}
</style>
Here, this jQuery js file and Roboto font css will only be included in this page, instead of all the pages.
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>
After upgrading to Nuxt.js 2, I noticed that about 30 CSS files are loaded when the homepage loads. I actually noticed it when I checked Google Pagespeed Insights and saw about 30 "blocking CSS resources".
Is there any setting for lazy loading them or something like that?
Nuxt2 has the code splitting and you can use the every css files in the current page only so you have 2 way for bundling css, first is the common css in the all project and second is an isolate css file for each page. use the scoped attribute in the style tag.
for example:
//////// sample.vue//////
<template>
write somethin.....
</template>
<script>
write som,ething.....
</script>
<style lang="scss" scoped>
body {
background-color: gray;
color: #9e9e9e;
}
</style>
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
https://github.com/nuxt/nuxt.js/issues/3166#issuecomment-423832425
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';