Creating a Meteor project that uses Vue and Typescript

Question

I'm having a lot of trouble trying to get Typescript working in a Meteor project with Vue.

I've created a project from scratch using these commands.

Commands

meteor create --vue gift-list-app
meteor add typescript
meteor npm install --save-dev @types/meteor
meteor add nathantreid:vue-typescript-babel
meteor npm install --save-dev @babel/plugin-transform-typescript

I next go into Hello.vue and specify the lang in the <script> tag.

<template>
  <div>
    <button @click="increment">Click Me</button>
    <p>You've pressed the button {{counter}} times.</p>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      counter: 0,
    }
  },
  methods: {
    increment() {
      this.counter += 1
    }
  },
}
</script>

<style scoped>
  p {
    font-family: serif;
  }
</style>

Error

[vue-component] Error while compiling in tag <script> col:1: C:\Users\Michael\Desktop\test-app\gift-list-app\node_modules\@vue\cli-plugin-typescript\generator\template\src\components\HelloWorld.vue: Unexpected token (1:1)

> 1 | [^]*?<\/script>/
    |  ^
  2 | ---
  3 | <script lang="ts">
  4 | <%_ if (!options.classComponent) { _%>
[vue-component] Error while compiling in tag <script> col:1: C:\Users\Michael\Desktop\test-app\gift-list-app\node_modules\@vue\cli-plugin-typescript\generator\template\src\components\HelloWorld.vue: Unexpected token (1:1)

> 1 | [^]*?<\/script>/
    |  ^
  2 | ---
  3 | <script lang="ts">
  4 | <%_ if (!options.classComponent) { _%>
=> Errors prevented startup:
   
   While processing files with akryum:vue-component (for target
   web.browser):
   packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not
   defined
   at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
   at VueComponentTagHandler.getResults
   (packages/vue-component/plugin/tag-handler.js:156:11)
   at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
   at compileOneFileWithContents
   (packages/vue-component/plugin/vue-compiler.js:541:12)
   at VueCompo.compileOneFile
   (packages/vue-component/plugin/vue-compiler.js:140:12)
   at packages/vue-component/plugin/vue-compiler.js:57:34
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
   at replenish
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
   at Object.eachLimit$1
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
   at VueCompo.processFilesForTarget
   (packages/vue-component/plugin/vue-compiler.js:41:11)
   
   
   While processing files with akryum:vue-component (for target
   os.windows.x86_64):
   packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not
   defined
   at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
   at VueComponentTagHandler.getResults
   (packages/vue-component/plugin/tag-handler.js:156:11)
   at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
   at compileOneFileWithContents
   (packages/vue-component/plugin/vue-compiler.js:541:12)
   at VueCompo.compileOneFile
   (packages/vue-component/plugin/vue-compiler.js:140:12)
   at packages/vue-component/plugin/vue-compiler.js:57:34
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
   at replenish
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
   at
   C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
   at Object.eachLimit$1
   (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
   at VueCompo.processFilesForTarget
   (packages/vue-component/plugin/vue-compiler.js:41:11)

What is the correct method of creating a Meteor/Vue project that uses Typescript?

Update

I've tried adding the libraries mentioned in the answer below however I still get problems when using the @Component tag as shown in multiple tutorials. I've added the vue-property-decorator library.

Code

<template>
  <div>
    <button>Click Me</button>
    <p>You've pressed the button times.</p>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'

@Component
export default class Hello extends Vue {
}
</script>

<style scoped>
p {
  font-family: serif;
}
</style>

Error

[vue-component] Error while compiling in tag <script> using lang ts Cannot read property 'data' of null
TypeError: Cannot read property 'data' of null
at typescriptHandler (packages/vue-component-typescript-babel/vue-typescript.js:22:22)
at packages/meteor.js:306:21
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:91:26)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at hotCompile (packages/vue-component/plugin/vue-compiler.js:347:23)
at runWithEnvironment (packages/meteor.js:1286:24)
Exception in callback of async function: ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at hotCompile (packages/vue-component/plugin/vue-compiler.js:347:23)
at runWithEnvironment (packages/meteor.js:1286:24)
[vue-component] Error while compiling in tag <script> using lang ts Cannot read property 'data' of null
TypeError: Cannot read property 'data' of null
at typescriptHandler (packages/vue-component-typescript-babel/vue-typescript.js:22:22)
at packages/meteor.js:306:21
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:91:26)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
at packages/vue-component/plugin/vue-compiler.js:57:34
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
at C:\tools\isobuild\compiler-plugin.js:212:27
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at C:\tools\isobuild\compiler-plugin.js:199:22
at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
at C:\tools\isobuild\compiler-plugin.js:198:15
at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
at ClientTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
at C:\tools\isobuild\bundler.js:858:34
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at ClientTarget.make (C:\tools\isobuild\bundler.js:852:18)
at C:\tools\isobuild\bundler.js:3233:14
at C:\tools\isobuild\bundler.js:3386:25
at Array.forEach (<anonymous>)
  at C:\tools\isobuild\bundler.js:3340:14
  at Object.capture (C:\tools\utils\buildmessage.js:283:5)
  at bundle (C:\tools\isobuild\bundler.js:3214:31)
  at C:\tools\isobuild\bundler.js:3157:32
  at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
  at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
  at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
  at C:\tools\runners\run-app.js:581:24
  at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
  at bundleApp (C:\tools\runners\run-app.js:580:34)
  at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
  at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
  at C:\tools\runners\run-app.js:410:12
  [vue-component] Error while compiling in tag <script> using lang ts Cannot read property 'data' of null
    TypeError: Cannot read property 'data' of null
    at typescriptHandler (packages/vue-component-typescript-babel/vue-typescript.js:22:22)
    at packages/meteor.js:306:21
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:91:26)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
    at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
    at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
    at packages/vue-component/plugin/vue-compiler.js:57:34
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
    at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
    at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
    at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
    at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
    at C:\tools\isobuild\compiler-plugin.js:212:27
    at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
    at C:\tools\isobuild\compiler-plugin.js:199:22
    at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
    at C:\tools\isobuild\compiler-plugin.js:198:15
    at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
    at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
    at ServerTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
    at C:\tools\isobuild\bundler.js:858:34
    at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
    at ServerTarget.make (C:\tools\isobuild\bundler.js:852:18)
    at C:\tools\isobuild\bundler.js:3258:14
    at C:\tools\isobuild\bundler.js:3392:24
    at Object.capture (C:\tools\utils\buildmessage.js:283:5)
    at bundle (C:\tools\isobuild\bundler.js:3214:31)
    at C:\tools\isobuild\bundler.js:3157:32
    at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
    at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
    at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
    at C:\tools\runners\run-app.js:581:24
    at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
    at bundleApp (C:\tools\runners\run-app.js:580:34)
    at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
    at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
    at C:\tools\runners\run-app.js:410:12
    => Errors prevented startup:

    While processing files with akryum:vue-component (for target web.browser):
    packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
    at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
    at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
    at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
    at packages/vue-component/plugin/vue-compiler.js:57:34
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
    at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
    at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
    at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)


    While processing files with akryum:vue-component (for target os.windows.x86_64):
    packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
    at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
    at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
    at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
    at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
    at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
    at packages/vue-component/plugin/vue-compiler.js:57:34
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
    at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
    at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
    at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
    at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)

If I've understood correctly these formats for the components should be possible when using Typescript?

Silversmith

Answer 1

Thanks for the detailed commands and setup directions.

Indeed I ran into the same problem, so I tried cloning nathantreid:vue-typescript into packages directory and restarted the application. It installed these packages then continued to work flawlessly!

    "devDependencies": {
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@types/meteor": "^1.4.67",
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-decorators": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0"
  }

So, I recommend that you first try installing these dev dependencies first and it doesn't work then try cloning the package as I did. Good Luck!

Humdinger

This has fixed it for if I use the code for Home.vue shown above but it still doesn't seem to allow the @Component tag to be used as shown in the tutorials I've seen. I've updated the question. Am I doing this wrong? – Silversmith

I see. Since this the case. Let me share my findings so far: vue-class-component requires extra build steps configuration class-component.vuejs.org/guide/installation.html#manual-setup Which you can mimic them in Meteor as describe here: github.com/meteor/meteor/tree/devel/packages/… So, I installed the plugins as described and configured .babelrc but this has led me to more errors and I thought I'm straying off the path. You may try following in my foot steps and see where it leads you. – Humdinger

I mentioned the question in the community Slack meteor-community.slack.com/archives/CS46CNDN0/p1616249493000400 and forums.meteor.com/t/vue-typescript-meteor-type-definition/54506 – Humdinger