How to import libraries as plugins in a Vite application?

0
votes

I have a Freshly installed VITE app.

How to import vuelidate library and use as a Vue plugin to enable the functionality globally.

Vite does not show up "vuelidate" form.

Error says:

[vite] Avoid deep import "vuelidate/lib/validators" (imported by /src/App.vue) because "vuelidate" has been pre-optimized by vite into a single file. Prefer importing directly from the module entry:

import { ... } from "vuelidate"

If the dependency requires deep import to function properly, add the deep path to optimizeDeps.include in vite.config.js.

main.js file

import { createApp } from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

App.vue file

<template>
  <div>
    <div class="form-group">
      <label class="form__label">Name</label>
      <input class="form__input" v-model.trim="$v.name.$model" />
    </div>
    <div class="error" v-if="!$v.name.required">Field is required</div>
    <div class="error" v-if="!$v.name.minLength">Name must have at least {{ $v.name.$params.minLength.min }} letters.</div>
    <tree-view :data="$v.name" :options="{ rootObjectKey: '$v.name', maxDepth: 2 }"></tree-view>
    <div class="form-group">
      <label class="form__label">Age</label>
      <input class="form__input" v-model.trim.lazy="$v.age.$model" />
    </div>
    <div class="error" v-if="!$v.age.between">Must be between {{ $v.age.$params.between.min }} and {{ $v.age.$params.between.max }}</div>
    <span tabindex="0">Blur to see changes</span>
    <tree-view :data="$v.age" :options="{ rootObjectKey: '$v.age', maxDepth: 2 }"></tree-view>
  </div>
</template>

<script lang="ts">
import { required, minLength, between } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      name: "",
      age: 0,
    };
  },
  validations: {
    name: {
      required,
      minLength: minLength(4),
    },
    age: {
      between: between(20, 30),
    },
  },
};
</script>

I am pretty sure that I must add the deep path to optimizeDeps.include in vite.config.js. to use vuelidate globally.

I have tried some lines on vite.config.js file like

optimizeDeps.include = "/node_modules/vuelidate/lib/validators"

said:

[vite] failed to load config from E:\test\vue\vite.config.js:

or

optimizeDeps = "/node_modules/vuelidate/lib/validators"

said on console:

Uncaught SyntaxError: import not found: minLength

https://github.com/vitejs/vite#bare-module-resolving

Does it mean I can not use Vue.use(plugin) with vite_?

1
vue.jsimportvuelidatevitejs

1 Answers

0
votes

The vite Github page says "Note to Vue users: Vite currently only works with Vue 3.x. This also means you can't use libraries that are not yet compatible with Vue 3."

While the Vuelidate website has on its main page: "Simple, lightweight model-based validation for Vue.js 2.0".

So even while Vuelidate might work with Vue 3, Vite doesn't work with libraries that aren't compatible.

I guess your options here are to find a different validator, or to abandon using Vite.