vue-wc-model
v0.0.3vue-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:
- 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;
});
},
}
- 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.