As a part of implementing Form Validation, I want to use Vuelidate library in a Sails.js page. The page gets the Vue code by using this webpage.page.js: , which is linked to this webpage.ejs View Template: This gives an error 'Cannot use import statement outside a module'. I have the Vuelidate npm package installed. Thus, how can I import the

Issues with importing Vuelidate Library

As a part of implementing Form Validation, I want to use Vuelidate library in a Sails.js page. The page gets the Vue code by using this webpage.page.js:

import Vuelidate from 'vuelidate'

parasails.registerPage('web-page', {
    data: {
        message: '',
        class: ''
    },
    validations: {
       // For Vuelidate
       message: {
         required,
       },
       class: {
         required,
       },
    }, 
});

, which is linked to this webpage.ejs View Template:

<div id="web-page">
  <div class="container d-flex-column justify-content-center">
        <div class="heading-container">
            <p class="h2">Heading</p>
        </div>
        <form action="/someaction" method="post">
            <div class="form-group" :class="{ 'form-group--error': $v.name.$error }">
                <label 
                      for="name" class="form__label">Name</label>
                <input
                      type="text"
                      class="form__input"
                      name="name"
                      v-model.trim="$v.name.$model"/>
            </div>
           <div class="error" v-if="!$v.name.required">Field is required</div>
           <div class="form-group" :class="{ 'form-group--error': $v.class.$error }">
                <label for="class" class="form__label">Class</label>
                 <input
                      type="text"
                      class="form__input"
                      name="class"
                      v-model.trim="$v.class.$model"/>
           </div>
           <div class="error" v-if="!$v.class.required">Field is required</div>
           <button class="btn btn-success text-white" type="submit">Save</button>
        </form>
    </div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>

This gives an error ‘Cannot use import statement outside a module’. I have the Vuelidate npm package installed. Thus, how can I import the Vuelidate library to get this working?

Answer

If you are using the Sails web template, you need to import Vuelidate dist files validators.min.js and vuelidate.min.js into the assets/dependencies folder. After that, Grunt imports the files and you’ll be able to use them globally without import because they will be available in the browser.

Check the documentation section The browser-ready bundle is also provided in the package.:

https://vuelidate.js.org/#sub-basic-usage

Advertisement

Answer