https://github.com/berhalak/vue-strict

Write components in typescript in separate file.
https://github.com/berhalak/vue-strict

typescript vue vue-components vuecli vuejs2

Last synced: 18 days ago
JSON representation

Write components in typescript in separate file.

• Host: GitHub
• URL: https://github.com/berhalak/vue-strict
• Owner: berhalak
• License: gpl-3.0
• Created: 2018-10-07T20:34:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-13T23:23:31.000Z (almost 6 years ago)
• Last Synced: 2025-12-08T13:45:52.852Z (7 months ago)
• Topics: typescript, vue, vue-components, vuecli, vuejs2
• Language: TypeScript
• Homepage:
• Size: 58.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

    

	  
{{msg}} {{user}}

	

	

	export default {

		props : ['user'],

		data() {

			return {

				msg : 'Hello world'

			}

		}

	}

	


After (in 2 files)

    // component.vue

    

	  
{{msg}} {{user}}

	


	// 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

1. Webpack template

	module: {

		rules: [

			{

				test: /\.vue$/,

				use: [{

					loader: 'vue-loader',

					options: vueLoaderConfig

				},{

					loader : 'vue-strict'

				}]

			},

2. 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

	}