Setting up Meteor, Vue and Typescript

Question

I'm struggling to get Meteor, Vue and Typescript to work together. I can't find any tutorials on Meteor, Vue and Typescript and the example github projects don't work correctly either and use workarounds to avoid the issues I'm having. E.g. Separating the Typescript code into its own file instead of having it within the script tag.

According to this tutorial I should be able to define my component in two different ways.

1

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

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

2

<script lang="ts">
@component({
    name: 'HelloWorld'
})
</script>

If I create a meteor vue project and do these steps, the code above has errors.

Meteor Create

meteor create --vue "vue-typescript-test"

Add tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

Add ts-loader

npm i -D typescript ts-loader

Add vue-property-decorator

npm install vue-property-decorator

If I change the script in Hello.vue to use Typescript like the tutorials mention, I get an error.

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

@Component({
  name: 'Hello'
})
</script>

Error

[vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
    [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
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:81:13)
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: Can't find handler for lang 'ts', did you install it?
    [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
      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:81:13)
      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: Can't find handler for lang 'ts', did you install it?
          [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
            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:81:13)
            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 web.browser.legacy):
            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)

How should a Meteor, Vue and Typescript project be set up correctly?

Update

If anybody can show steps for how to create a Meteor, Vue, Typescript and Vue Class Component syntax project that would solve my problem.

Doorbell

BTW, the README explicity states that for vue-class-component the lang attribute must be equal to typescript not ts. – Grados

Does this answer your question? Creating a Meteor project that uses Vue and Typescript – Bothersome

What's the difference between this question, and your previous? #66656842 – Bothersome

The first one was about getting it to work with just export default while this one is using the @Component tag. That questions answer fixes it for the code I mentioned but didn't make typescript work fully with the annotations like I'm requesting here. I thought it would be better to create another question to highlight the problem of getting the component format working correctly. – Doorbell

Do you have a webpack.config or something like this ? If you have a full link of your repo it would be nice. – Yogini

Here's a repo I created. Let me know if you meed anything else. github.com/Michael2109/meteor-vue-typescript-example – Doorbell

I could not reproduce your error, if you clone the repo you gave me you got the error above ? (After install and running) – Yogini

If you clone the repo and change a .vue component to use class style syntax you'll get the error I had. The repo is just a general working meteor, vue, and typescript project. I'm not able to get on my pc the next few days sorry. – Doorbell

Answer 1

You need to provide a repository for us to help you. By the way your tutorial is not a tutorial to follow step by step. It just explain how things work. I'd recommend you to find another.

I don't know what is your point but if it's just to have an VueJS with Meteor (using typescript) I'd recommend you to refer to the documentation of the official framework. I can guarantee you it is better than a tutorial.

Here is for vueJS https://guide.meteor.com/vue.html

And here is for the typescript part https://guide.meteor.com/build-tool.html#typescript

In case you don't want to follow the documentation for any reason and stay with your projet, so we'll have to read what it says.

Can't find handler for lang 'ts'

ts-loader is package that will let you use lang="ts" in your script.

I guess you have the message above because it is not configured. So you'll have to find how to configure it.

In https://cnpmjs.org/package/ts-loader it says :

Configuration Create or update webpack.config.js like so:

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./app.ts",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

Add a tsconfig.json file. (The one below is super simple; but you can tweak this to your hearts desire)

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Yogini

The reason I added the tutorial is there are no other resources for how to set this up in Meteor. None of the Meteor documentation mentions how to get this working with both Typescript and Vue class style components. All I want to do is get my example app to use Meteor, Vue, Typescript, and Vue Class Style components. – Doorbell