Does not works in VUE 3 + Server Sider Rendering

[murilolivorato]

Hello , in VUE 3 , use components like this, will not work -
<the-mask :mask="['###.###.###-##', '##.###.###/####-##']" />

I need to use directives , like this -

<input v-mask="['###.###.###-##', '##.###.###/####-##']" />

The problem is that I am working with SSR + VUE 3 , and it will not work .
Working with directives with vue 3 + SSR . it will give me erros .

It is that possible to work with components in vue 3 ?

[murilolivorato]

nobody can help me ? =/

[murilolivorato]

it does not works for vue 3 + SSR . =/ no answer

[joao-pedro-alves]

it does not works for vue 3 + SSR . =/ no answer

Unfortunatelly this package has been abandoned by its creator :/

[ilyaDegtyarenko]

Try this https://github.com/uNmAnNeR/imaskjs/tree/master/packages/vue-imask

[abdurrahmanseyidoglu]

You can detect if the window object is available (Which means we are on the client side) and render the input accordingly like This:

<template>
  <div v-if="isBrowser">
    <input v-mask="['###.###.###-##', '##.###.###/####-##']" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isBrowser = ref(typeof window !== 'undefined');
</script>

Have a look at this as well: https://vuejs.org/guide/scaling-up/ssr.html#access-to-platform-specific-apis