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',
}
}
Related
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.
I have an ssr app and a text editor component that uses vue-codemirror. To my knowledge, this can't be used in ssr and the page fails to load with the error "navigator is not defined." This makes sense because the navigator wont exist until the document is ready.
I read in the docs that <q-no-ssr /> is used for forcing a component to be rendered on the client only. I tried wrapping my text editor component in a <q-no-ssr /> tag but am still running into the "navigator is not defined" error.
The text editor I am using is quasar tiptap.
Here is what I have tried:
<q-no-ssr>
<quasar-tiptap
v-bind="options"
#update="onUpdate"
/>
</q-no-ssr>
What am I missing?
Create a boot file: quasar new boot tiptap
tiptap.js
import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'
import "quasar-tiptap/lib/index.css";
Vue.use(QuasarTiptapPlugin, {
language: 'en-us',
spellcheck: true
})
reference boot file in quasar.conf.js
boot: [
'axios',
{path: 'tiptap', server: false} //render only on client
],
use component wherever you want in your application:
<div>
<quasar-tiptap
ref="transcript"
v-bind="options"
#update="onUpdate"
#annotation="handleAnnotation($event)"
/>
</div>
I'm using vuetify on my application. The design team create a flat design and I want to change the theme of vuetify to match with mockups
I try to find an option to disable ripple effect easily all over the application but it doesn't exist.
I try to create a component extension to avoid repeating :ripple="false"on each component I use.
I'll take a button component as an example.
<v-btn :ripple="false">My Button</v-btn>
each button on my application need to have ripple=false
My aim is to create a component like this
<my-button>My Button</my-button>
I try to extend v-btn in another component like this.
<template>
<v-btn v-bind="options" :ripple="false"></v-btn>
</template>
<script>
import { VBtn } from 'vuetify';
export default {
name: 'MyButton',
extend: VBtn,
computed: {
options() {
return this.props;
},
},
};
</script>
<style scoped>
I try this way to avoid copy/paste all the props of v-btn.
All solutions that I've tried failed.
You can modify Vue.js components globally even after they've been registered.
In this case, you can simply do this :
const VBtn = Vue.component('VBtn')
VBtn.options.props.ripple.default = false
You can add that in your vuetify.js file before the export default new Vuetify (...) for instance.
- Tested with Vuetify 2.1.14
You can set the complete container to not visible.
.v-ripple__container {
display:none !important;
}
According to Vuetify documentation you can modify the Stylus variables - so you can try to redefine these to your taste, e.g. by setting them to none:
$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
$ripple-animation-visible-opacity := .15
Override ripple directive with global mixin in main.js
let overrideRipple = {
directives:{
ripple:{
inserted: ()=> {
console.log("Ripple overrided")
}
}
}
}
Vue.mixin(overrideRipple);
With the release of Vuetify 2.0 you can actually just turn off ripples globally by modifying your vuetify.js file like so.
export default new Vuetify({
global: {
ripples: false
},
icons: {
iconfont: 'mdi',
},
});
I need some help with configuring material-web-components to work with vue.js components. The error occurs when I want to import a #material component scss into my vue component.
SomeVueComponent.js:
<style lang="scss">
#import '#material/textfield/mdc-text-field.scss';
</style>
The error is that some #material components import other #material component scss, but cannot be found because of the includePaths, which I fixed by adding this code into my laravel-mix file:
webpack.mix.js:
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
includePaths: ['node_modules']
})
}
}
}
]
}
});
After saving this file everything compiles correctly but now I get this error for all of my vue components on the site:
[Vue warn]: Failed to mount component: template or render function not defined.
After a whole day of researching on how to fix this, I found out that the conflict is generating because I push the vue-loader 2 times with webpack (The default one + my custom one).
Does anyone know a workaround on how to do this? It would be really helpful.
I am using:
laravel 5.7.8
laravel-mix 4.0.15
vue 2.6.10
vue-loader 15.4.2
webpack 4.27.1
I have already tried the new way to import vue components after vue-loader v13+. (Adding the .default after the require) Still same vue error.
Vue.component('some-vue-component', require('./components/SomeVueComponent.vue').default);
SomeVueComponent.js:
<style src="#material/textfield/mdc-text-field.scss" lang="scss"></style>
Laravel 6
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
sassOptions: {
includePaths: ['./node_modules']
}
});
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';