I've tried to install Vuetify with Vue3 for the first time today. Almost everything is working properly: components are being imported correctly, classes like "text-center" are working well too.
But I've noticed that props like "dark", and classes like "color--text" are not and I can't tell why ...
Here is my plugins/vuetify.js file:
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'
export default createVuetify({
components,
directives,
})
For example:
<h1 class="display-2 font-weight-bold mb-3">
<div class="red--text">Welcome to the Vuetify 3 Alpha</div>
</h1>
The text will not be red, nothing changes.
I have no clue where the problem could come from soo ... This is an S.O.S
Thanks!
According to vuetify classes It should be text-red instead of red--text :
<v-app>
<div class="bg-purple-darken-2 text-center">
<span class="text-red">Lorem ipsum</span>
</div>
</v-app>
Related
i'm new of this framework :(
the problem is here because i've tried to put the component in another page and work it.
It sign error the component
this is my index.vue page
If you're using nuxt2.0, you should wrap them in a container but this is not needed in nuxt3.0.
<template>
<main>
<navbar />
<slideshow />
</main>
</template>
If this is nuxt2.0, then you should also import the component and register it but you haven't done it here. The path you've given to the component is not correct also.
<script>
import Slideshow from '~/components/slideshow.vue';
export default {
components: { Slideshow }
}
</script>
You need to wrap the into a div or any other tag (to not have multiple tags at the root of the template) like that
<template>
<div>
<navbar></navbar>
<slideshow></slideshow>
</div>
</template>
And you can also skip the import part because Nuxt is already doing that for you as explained here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/
I created Vue 3, quasar project. everything worked fine till the moment I add new component. everything is rendering except the new component which I built and added it to the project. please help me with this problem if you can.
Here is my code:
index page:
<template>
<q-page class="flex flex-center">
<!-- section one-->
<SectionOne />
</q-page>
</template>
<script>
import { defineComponent } from "vue";
import SectionOne from "components/MainPage/SectionOne.vue";
export default defineComponent({
components: {
SectionOne,
},
name: "IndexPage",
});
</script>
Component:
<template>
<div class="q-pa-md q-gutter-md">
<div class="row justify-between">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg">
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</div>
</template>
Not sure about your project structure, but try this (missing "./")
import SectionOne from "./components/MainPage/SectionOne.vue";
You can also import from the root 'src' like this:
import SectionOne from "src/components/MainPage/SectionOne.vue";
im working on a nuxt project and im using vuetify as a UI framework.
i tried using v-otp-input but i get this error in my console.
all the vuetify elements are working fine but this one doesn't , what should i do ?
here is my code
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
ps:im looking for somthing like this:
Any help would be appreciated
that was because of vuetify version (vuetify version must be 2.6.0 or higher)
for updating vuetify:
1.Run npm info vuetify to lookup for the list of versions that they have.
npm info vuetify
2.install the specific version that you want with the following
for example:
npm install --save vuetify#2.6.6
You can use Vuetify <v-opt-input> component and override a bit its css for your needs.
<v-otp-input
length="6"
plain
type="number"
></v-otp-input>
To edit the css style of the component, it's not an easy task as you have to check on the browser debugger what are the classes applied to the component and what elements it includes.
But it's doable :)
Assuming you are using the last Vuetify version (2.6.6) you have to wrap your page or your layout into a component: https://vuetifyjs.com/en/api/v-app/
<template>
<v-app>
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
</v-app>
</template>
I had the same problem, using vuetify v2.6.9, with vue-cli-plugin vuetify. I tried manually importing the component in my component and it worked:
<template>
<v-otp-input
class="
font-weight-bold
text-uppercase
btn-primary
bg-gradient-primary
py-2
px-6
me-2
mt-7
mb-2
w-100
"
color="#5e72e4"
v-model="otp"
:disabled="loading"
#finish="onFinish"
></v-otp-input>
</template>
<script>
import { VOtpInput } from "vuetify/lib";
export default {
name: "sign-up-verify",
components: { VOtpInput },
}
</script>
I am trying to include some animation using either wowjs or animate.css but it doesnt seem to work.
Here are the steps that I took.
1st:
npm install wowjs
in main.js
import 'animate.css';
In pages that I would want to use animate
<b-container id = "container">
<b-row style = "margin-top: 100px;" class = "animated fadeInUp">
....
</b-row>
<b-container>
In pages that I would want to use wowjs
<template>
<b-container id = "container">
<b-row style = "margin-top: 100px;" class = "wow fadeInUp">
....
</b-row>
<b-container>
<template>
<script>
import {WOW} from 'wowjs';
export default {
mounted() {
new WOW().init();
},
}
</script>
Is there anything wrong that i did here? no animation is showing up at all.
Appreciate any help!
For the vue you need to have the latest vue-cli (4.5.12) and animate.css (4.1.1) versions for it to work.
Probably you may want to import them directly and load them through a CDN.
For wowjs try, (npm install wow.js) instead. You can check the references here:
https://github.com/animate-css/animate.css/issues/993
https://github.com/matthieua/WOW/issues/252
In my vue project some bootstrap-vue components renders fine but others render as a HTML comment. In this example they both components show up fine in the Vue Dev tool panel. I have added a "normal" input field just to see if that gets rendered ok.
<template>
<div class="list-group">
<div>Test</div>
<b-form-input v-model="text1"
type="text"
placeholder="Enter your name"></b-form-input>
<b-form-textarea id="textarea1"
v-model="text"
placeholder="Enter something"
:rows="3"
:max-rows="6"></b-form-textarea>
<input type="text"/>
</div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
#Component
export default class ProjectList extends Vue {
text = 'text';
text1 = 'text1';
}
</script>
But get rendered as:
I would expect to see both the input fields in the browser but I only see the textarea and the "normal" input field. I see no errors in the log. What could I be missing?
Ok I found a solution:
Instead of importing:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
I import:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.use(BootstrapVue);
And now everything works fine. I am not sure why as the former is described in the bootstrap-vue documentation. Maybe its because I am using TypeScript..?