CODEWITHSUNDEEP
laravelvalidationvue.js
Jackson Meires
Jackson Meires

Reputation: 113

How to use form mask in Laravel with Vue

I'm trying to use mask on Form with Laravel and VueJS using https://vuejs-tips.github.io/vue-the-mask/, I'm new to Vue so I looked for some way to use mask, I ended up finding this lib. However, I do not know how to use the example of the site since it does not show a complete example, just snippets of code.

Displays the second error:

SyntaxError: import declarations may only appear at the top level of a module inscriation: 62: 8 [Vue Warn]: Error compiling template:

[Vue Warn]: Failed to resolve directive: mask

(found in )

I added the code in the blade.php 

<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script> 
<script>
     // Local Directive
         import {mask} from 'vue-the-mask'

         export default {
             directives: {mask}
         }
</ script>

<template>
     <input type = "tel" v-mask = "'##/##/####'" />
</ template>

Upvotes: 0

Views: 2459

Answers (1)

user7847084
user7847084

Reputation:

You can't do import in native (browser) JS, you need to use laravel mix or webpack (or any other bundler)

easiest solution: laravel-mix

npm install laravel-mix --save

then open (or create webpack.mix.js file), and type this (of course you need to specify your own path)

var mix = require('laravel-mix');

mix.js('/resources/path_to_input_javascript', '/public/path_to_resulting_javascript')

In your input file you create simple vue instance (and import your component)

import Vue from 'vue';
import mask from 'path_to_component.vue'

var app = new Vue({
    el: "#root", //root element name
    components: {'x-mask': mask}
});

and in your component you put the code:

<script>
     // Local Directive
         import {mask} from 'vue-the-mask'

         export default {
             directives: {mask}
         }
</script>

<template>
     <input type = "tel" v-mask = "'##/##/####'" />
</template>

It's not that complex, once you get used to it. You should read/watch about bundlers.

Upvotes: 1

Related Questions