How to use form mask in Laravel with Vue - laravel

Question

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>

Answer 1

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.