Validation in vue js using vee-validate having error - vue.js

I want give the validation in vuejs for that i am using vee-validate
My vue js version is 2.6.10
And install run -npm install vee-validate
I declare in main.ts:
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
But having error:
"export 'default' (imported as 'VeeValidate') was not found in 'vee-validate'
And also on console:
Cannot read property 'install' of undefined
at Function.Vue.use

import * as VeeValidate from 'vee-validate';
that resolve the problem

this seems to happen in any version after 3.0. I installed vee-validate#2.2.15 and it worked.

Since the newsest release, it's name had changed, now if you want to call it, and you register it :
import { ValidationProvider } from 'vee-validate';
// Register it globally
// main.js or any entry file.
Vue.component('ValidationProvider', ValidationProvider);
Of course, you can check the Npm package documentation on : https://www.npmjs.com/package/vee-validate

To install it, Run
npm i vee-validate --save

Related

Unable to install plugins in Nuxt JS 3

I am a React JS Developer learning Nuxt JS - But I am failing to understand the way NPM libreries are imported and used in Nuxt 3 as plugins.
Console:
Failed to resolve import "C:/Users/Eigenaar/Desktop/nuxt-
course/first/plugins/v-tooltip.js" from
"virtual:nuxt:C\.....first\.nuxt\plugins\client.mjs"
plugins/test.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss'
],
plugins: ['~/plugins/v-tooltip.js'],
})
app.vue
<h2 v-tooltip="Show tooltip">Hover me!!</h2>
I have been following the official documentation but still getting error messages when trying to use third party NPM packages in general, is anybody having the same issue?

How does one import an npm module into a Vue.js application?

I would like to import pdf-lib into my vue.js application.
Installed using npm
npm install --save pdf-lib
Imported into my component like this,
import _ from "#pdf-lib";
export default {
data() {
I get the following error message,
Module not found: Error: Can't resolve 'pdf-lib' in

vuetify says that This dependency was not found

I got an error when building a vue-cli app with vuetify framework.
This dependency was not found:
* vuetify/es5/components/VCardTitle in ./src/plugins/vuetify.js
To install it, you can run: npm install --save vuetify/es5/components/VCardTitle
When I try to install it it says:
error Received malformed response from registry for undefined. The registry may be down.
Any ideas what it could be?
package json: "vuetify": "^1.1.12"
Im using vuetify a-la-carte.
I have also added VCardTitle to the vuetify.js file in imports and components.
You're importing from 'vuetify' as it is in Vue Official Documentation example (https://v1.vuetifyjs.com/en/guides/a-la-carte).
Change it to 'vuetify/lib'.
Example:
import {
Vuetify, // required
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar,
transitions,
} from 'vuetify/lib';

Error in console with Vue-chartJS and Webpack

I installed vue-chartjs and also added chart.js both using NPM
When I run npm start my server is started but in broswer console i get an error
TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Doughnut.extend is not a function
I'm not sure what this mean. I reinstalled all packages also installed this packages separete using npm install vue-chartjs
Can you show your code of your component? Webpack 3 ?
With vue-chartjs version 3 you have to create your components this way:
import {Doughnut} from 'vue-chartjs
export default {
extends: Doughnut,
mounted () {
this.renderChart(data, options)
}
}

Import a node module in Vue.js CLI instance

I've created a new vue app using vue init webpack sample-app .
I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.
What's the correct way to import this module into a Vue.JS app?
Open the terminal in your project root folder, then install the package:
npm install botui --save
Then open src/main.js in your text editor and add this:
import Vue from 'vue'
import BotUI from 'botui'
const botui = BotUI('my-botui-app', {
vue: Vue // pass the dependency.
})
This will create a botui instance. But that instance won't have any messages in it. You can check that it's working by adding a message:
botui.message.bot('Hello, how can I help?')