Question: Vee-Validate 3.x vanilla JS example?

[RickStrahl]

Versions

• vee-validate: 3.0.3
• vue: 2.6.10

Request for Clarification I'm having a hard time getting vee-validate to work when using vee-validate without a build process just loading from vue/vee-validate from scripts.

Using plain script drop in I get <validationprovider> not registered:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

https://jsfiddle.net/h0rxcpvs/22/

As an aside I also tried using vee-validate with vanilla ES2015+ module loading and that also does not work

import Vue from './lib/vue/dist/vue.esm.browser.js';
import { ValidationProvider, extend } from './lib/vee-validate/dist/vee-validate.full.esm.js';

but this fails outright, failing to resolve the extend object.

Any chance the docs could provide some working examples or links to a online sample that demonstrates running vee-validate without full build process loaded only from scripts?

[logaretm]

Hello, this is not intentional. I probably screwed something up in the build process.

I will investigate and provide a solution for it, thanks for reporting this.

[logaretm]

So I investigated and it is not an issue with vee-validate. Everything is bundled correctly, but you used validationprovider in your HTML which does not exist.

You can reference components in Vue in two ways, PascalCase or kebab-case. in pure HTML with the compiler you should use kebab-case as HTML Tag names and attribute names are case-insensitive, while attribute values are case-sensitive.

In Vue SFC however, this is handled for you and so you can use pascal case which is a good practice to differentiate between Vue components, HTML elements and web components as the latter 2 would be kebab case.

These links should explain the problem:

https://vuejs.org/v2/guide/components-registration.html#Name-Casing

https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended

I updated your example:

https://jsfiddle.net/logaretm/t6v037pu/1/

I will add this to the docs.

[RickStrahl]

Thanks for getting back so quick on this.

Makes perfect sense and I wasn't following through with thinking about the casing because I initially just took the sample code you have here:

https://baianat.github.io/vee-validate/guide/getting-started.html#usage

and pasted it into my sample replacing the control. Note that the sample uses <ValidationProvider>:

<ValidationProvider rules="secret" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

Changing the component name in the page makes this work for me - more or less.

FWIW I still have issues in my own sample code I'm running. The validation now works, but I get a number of console warnings from the code:

Looks like these pop in after the document and the model are loaded.

Related: ESM Loading

the only way I was able to make vee-validate load properly was by using <script> tag loading of vee-validate.full.js and that works.

However, I also tried using vanilla JS module loading with this syntax:

import Vue from './lib/vue/dist/vue.esm.browser.js';
import { ValidationProvider, extend } from './lib/vee-validate/dist/vee-validate.full.esm.js';

which results in this error:

If I remove the import the error disappears.

This may be my own ignorance again here, but it would be great if there were individual samples that show the hook ups for:

1. CLI/WebPack loaded (which works fine now)
2. ES5 raw script tag (the Validation-Provider tag fix this works too now)
3. ES2015+ Module loading with vanilla js (no example)

To me for ES2015+ it's not obvious:

• is this is even going to work?
• which script needs to referenced (assuming the .esm.js ones)
• What module dependencies to ask for (assume same as WebPack/CLI)

I know having all these different mechanisms to support is a pain :-), but it would be really helpful to have a very basic hook up example with the script loading, initialization and simple component syntax in self-contained examples for each. That way there's no ambiguity on what goes with what as there is now in the Getting Started doc.

Aloha.

[logaretm]

I see. I don't use native import in browsers that often...

$attrs is read-only.

Some other stuff could be causing this, like having multiple vue packages packed by mistake. It might have a similar solution to this.

Related: ESM Loading

I will study some more about ESM modules in the browser, I could provide additional build targets for convenience.

[gamdolist]

dsfsdfsdf