In my Laravel 5.8 / vuejs 2.6 app I use
"vue-wysiwyg": "^1.7.2" and "vee-validate": "^2.2.5" and search a way to use in wysiwyg component v-validate
options, like:
<wysiwyg v-model="hostelRow.descr" v-validate="'required'" id="descr" name="descr" />
the line above required does not work...
Related
I am writing a single page app with VueJS. I have a lot of html elements sharing the same style across differents files. To simplify my job and clear the template section I've created .vue files to encapsulate commom html block.
For example I have files like AccentBox.vue:
<template>
<div class="bg-accent rounded-lg p-4 flex cursor-pointer">
<div class="m-auto flex flex-row">
<slot></slot>
</div>
</div>
</template>
The problem is that it increase the bundle size a lot and in the browser side it has a big performance overhead.
Example of the Home.vue:
<Box class="mt-5">
<GrowingAnimation>
<Header1>Titre:</Header1>
<Text class="mt-2">{{todo.title}}</Text>
<ClickScale>
<AccentBox class="mt-5 flex flex-row gap-4">
<TrashIcon class="h-10" />
</AccentBox>
</ClickScale>
</Animation>
</Box>
I want to know if there is a way to "precompile / transform" those component so that in the browser vuejs does not have to render the AccentBox.vue component and avoid having huge trees of nested vuejs components.
I already use the vuejs build command but browser side AccentBox.vue still is a component and take time to be processed by vue.
Transforming this:
<Header1>Titre:</Header1>
into
<h1 class="text-3xl font-bold">Titre:</h1>
Is there any way to do it? Thanks in advance.
Because your AccentBox.vue file represents a full-blown component, it does contain more overhead than simply writing out some divs. However, in Vue 3, this overhead is rather minimal, and there isn't a way to precompile something like a macro.
Vue allows us to write stateless components that simply render HTML, using something called a render function. We can rewrite your AccentBox component like this:
import { h } from 'vue'
const AccentBox = (props, context) => {
return h(
'div',
{ class: 'bg-accent rounded-lg p-4 flex cursor-pointer' },
h(
'div',
{ class: 'm-auto flex flex-row' },
context.slots
)
)
}
export default AccentBox
We can then import it in exactly the same way as a standard Vue file:
import AccentBox from 'AccentBox.js'
I'm using a component that comes from my design-system in vue 2,
I bundle it in vue3 with rollup to make it works with my front-end app.
For no apparent reason the class is not applied thus the style neither.
See below the component with the class
<div v-else-if="!isFolder">
<BIMDataCheckbox
:disabled="disabled"
v-if="multiSelect"
:modelValue="selected"
class="file-card__content__header__btn-menu__checkbox"
/>
<BIMDataRadio
:disabled="disabled"
v-else
big
:modelValue="selected"
name="BIMDataFileCardRadio"
/>
</div>
In a other front-end app in vue 2 where I also import the design-system the component works like a charm
any suggestion ?
I have a project in vuejs which bootstrap is already installed. I am using html, css project and converting into vuejs which bootstrap classes are used. However, dropdown bootstrap classes are not working for example, the below classes are not adding Show class when its getting clicked and normal html file is showing show class.
dropdown-toggle
dropdown-menu
I have
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"#popperjs/core": "^2.11.5",
Can someone please suggest something?
Thanks
Use show or shown
The in Bootstrap-Vue doesn't have a click event, but it does emit a show event shortly before the dropdown appears, including when it's clicked.
It immediately follows.
<b-nav-item-dropdown #show="doSomething">
Your code:
<b-nav-item-dropdown text="nav_title" #show="doSomething">
<b-dropdown-item href="#">
a
</b-dropdown-item>
<b-dropdown-item href="#">
a
</b-dropdown-item>
</b-nav-item-dropdown>
methods: {
doSomething() {
console.log('shown');
}
}
(You didn't find information for it on Vue's site because they didn't make the library.)
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 have created a basic app with Ionic + Nuxt.js, and using some of the ion-components. But the components don't seem to have their normal behavior. Using v-model, doesn't sync the data to the data function.
IE:
<ion-item>
<input v-model="email" type="email" name="email"> <<< WORKS
<ion-label position="floating">Email Address {{ email }}</ion-label>
<ion-input v-model="email" type="email" name="email"></ion-input> <<< DOES NOT
</ion-item>
data () {
return {
email: '',
password: '',
error: null
}
},
Some more scope of this ion-item is wrapped in ion-app / ion-grid / row-cols. Also, running the latest versions of all (2021/05/18).
Any help would be greatly appreciated.
I dont know if you use Ionic 5. When you use Ionic 5 and Vue 3 your solution should work.
BUT when you use Ionic 4 you need to use #IonChange=""
and check that you importet IonInput correct.