This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

vue-wc-model

This package is designed to be a temporary work around for the issue that Vue v-model directives do not work on web components.

It supports all of the default v-model directives (.lazy, .number, .trim).

Installation & Usage

Install the package with your package manager.

npm i vue-wc-model

Then to import depending on your configuration:

1. If you are using vue-cli to build your project:

Add the following to your vue configuration:

vue.config.js

const { createModelDirective } = require('vue-wc-model');
 
module.exports = {
    // ...
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-loader")
            .loader("vue-loader")
            .tap(options => {
                options.compilerOptions = options.compilerOptions || {};
                options.compilerOptions.directives = {
                    ...options.compilerOptions.directives,
                    wmodel: createModelDirective(),
                };
 
                return options;
            });
    },
}

1. If you are using webpack directly, much the same but provide it in your vue loader configuration:

webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compilerOptions: {
                        directives: {
                            wmodel: createModelDirective(),
                        }
                    }
                },
            }
        ]
    }
}

Once complete you are able to use the v-wmodel directive as normal in your component templates. See below for further configuration.

Options

Default configuration:

{
    eventNames: {
        change: 'change',
        input: 'input',
    },
    valueExpression: '$event.target.value',
}

Since not every web component is created equally you are able to pass through configuration to the model directive.

Option	Type	Default	Information
eventNames.change	string or ConfigFunction	change	Defines the event name to listen for changes on the component.
eventNames.input	string or ConfigFunction	input	Defines the event name to listen for input events on the component when the .lazy modifier is used.
valueExpression	string or ConfigFunction	$event.target.value	The compiled code to get the value from the event.

ConfigFunction type:

type ConfigFunction = (el: IASTElement, dir: IASTDirective) => string;

View the ./src/ypes/vue-compiler.interface.ts source file to see the definitions for el and dir. Essentially when you pass a config function you can pretty much implement custom handling of events depending on the element.

Other Information

Due to Vue using rollup (and not wanting to include flow compilation in this project) a lot of the vue compiler code is copied and pasted into this repository and converted to typescript. For those concerned, this will not increase your compiled bundle as this is only run during build time and would not be outputted into your bundle.