vue-strict
v1.0.0
Published
Extract code from vue single file component
Downloads
23
Maintainers
Readme
vue-strict
Simple plugin for vue (and vue-cli in progress).
It lets you extract script (in ts) from a vue single-file components, to a separate file written in typescript.
Before
// component.vue
<template>
<div>{{msg}} {{user}}</div>
</template>
<script>
export default {
props : ['user'],
data() {
return {
msg : 'Hello world'
}
}
}
</script>
After (in 2 files)
// component.vue
<template>
<div>{{msg}} {{user}}</div>
</template>
// component.vue.ts
import { ComponentBase, prop } from 'vue-strict'
export default class extends ComponentBase {
@prop
public user : string;
private msg : string = "Hello world";
}
How to install
npm i vue-strict
Add modify your webpack config
Webpack template
module: { rules: [ { test: /.vue$/, use: [{ loader: 'vue-loader', options: vueLoaderConfig },{ loader : 'vue-strict' }] },
Vue cli based projects, sample vue.config.js
var path = require('path')
module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-strict') .loader('vue-strict'); },
baseUrl: undefined, outputDir: undefined, assetsDir: undefined, runtimeCompiler: true, productionSourceMap: undefined, parallel: undefined, css: undefined
}