Using Vue components in a mixed ES/TS project

user_450913 0
Viewed 2120

I want to be able to use Vue files for both JavaScript and TypeScript, so in the <script> tag when lang is not set or set to js then use ES2015 and when <script lang="ts"> use TypeScript. I have an existing vue+ts project, now we decided that we want to build the app on top of vue-paper-dashboard that is written in ES6. I still want to keep my components in TS and .vue files with <script lang="ts">. So started with empty dashboard project and replaced Babel/ESLint with TS/TSLint. Project still loads fine: vue-paper-dashboard-typescript, however, when in any .vue file I set <script lang="ts"> I get errors like:

Module build failed: Error: Could not find file: 'src/components/Dashboard/Views/Overview.vue'.

I've already set --allowJs compiler option to true. I also tried changing entry file from main.js to main.ts, used entryFileIsJs: true for ts-loader, to no avail. How can I get vue single file components work in a mixed ES/TS project?

Thanks!

vuejs2 vue-component vue.js typescript ecmascript-6
1 Answers

I think I found the fix. For some reason it worked the second time I tried to change the entry point from main.js to main.ts and making necessary fixes in the ts file to compile.

I have a working sample here: vue-paper-dashboard-typescript

Update: Creative-Tim is now providing Vue Paper Dashboard 2 Pro (not free) which uses CLI 3 that supports TypeScript. Add TS support to the project with this command: vue add @vue/typescript.

user_4509130
Related