createApp with components and custom directives?

[gingerchew]

I've tried to do this a couple of ways, which usually means it's right in front of me.

I've made a form with just CSS and HTML, but wanted to add some ✨ pizzazz ✨ I made floating labels and used petite-vue to create a version that worked with a <select>, and am trying to add a phone input mask as a directive.

This is the code, which is wrapped in a <form v-scope id="formId">.

/** Used with the directive p-mask */
function phoneMask(ctx) {
    console.log(ctx.el);
    
    return () => {
        console.log(ctx);
    };
}

function FloatingLabelSelect(props = {}) {
    return {
        wrapper: null,
        el: null,
        updatePlaceholderShown() {
            const shouldShowPlaceholder = this.el.selectedOptions[0].value === 'false';
            
            this.wrapper.classList.toggle('placeholder-shown', shouldShowPlaceholder);
        },
        mounted(el) {
            this.wrapper = el.querySelector('[data-float-input]');
            this.el = el.querySelector('select');
        }
    };
}

createApp({
    FloatingLabelSelect
}).directive('p-mask', phoneMask).mount('#formId');

Not sure if it matters but the FloatingLabelSelect is marked up like this:

<label v-scope="FloatingLabelSelect()" @mounted="mounted($el)" ...attrs>
  <span data-float-input>
    <select @change="updatePlaceholderShown" ...attrs>
      <!-- options -->
    </select>
  </span>
  <!-- spans for label elements, no directives or scoping -->
</label>

The directive is used on a text input:

<input type="text" ...attrs p-mask="###-###-####" />

I noticed in the readme example and some of the discussions, they are written as createApp().directive('my-directive', myDirective).mount().

If I try splitting the two up, like this:

createApp().directive('p-mask', phoneMask).mount();

createApp({ FloatingLabelSelect }).mount('#formId');

I get an error that says FloatingLabelSelect is not defined. I'm guessing this is because petite-vue sees the v-scope="FloatingLabelSelect()" when running createApp the first time.

I'm not sure where I'm stumbling, and looking at the v2 custom directive documentation isn't helping me out either.

[niutech]

What's wrong with createApp({FloatingLabelSelect}).directive('p-mask', phoneMask).mount('#formId')?
You can also split it to 3 lines:

const app = createApp({FloatingLabelSelect})
app.directive('p-mask', phoneMask)
app.mount('#formId')

Keep in mind that directives are prefixed with v-, so it will be v-p-mask.

[gingerchew]

It was what I had originally, but I put the split version in just so that I was "showing all of my work".

But you already found the answer which is that it was not prefixed with v-.

Once I changed the input to:

<input ...attrs v-p-mask="test" />

It worked perfectly.

Looking at the docs now, it seems so obvious 😑