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.

BTW, the README explicity states that for vue-class-component the lang attribute must be equal to typescript not ts. — Harry Adel
– Harry Adel, Commented Mar 20, 2021 at 14:33
Does this answer your question? Creating a Meteor project that uses Vue and Typescript — Christian Fritz
– Christian Fritz, Commented Mar 20, 2021 at 15:55
What's the difference between this question, and your previous? stackoverflow.com/questions/66656342/… — Christian Fritz
– Christian Fritz, Commented Mar 20, 2021 at 15:55
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. — Michael
– Michael, Commented Mar 20, 2021 at 16:13
Do you have a webpack.config or something like this ? If you have a full link of your repo it would be nice. — crg
– crg, Commented May 10, 2021 at 17:55

crg · Accepted Answer · 2021-05-10 19:03:33Z

3

+150

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

edited May 10, 2021 at 19:03

answered May 10, 2021 at 18:35

crg

4,5963 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Over a year ago

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.

Collectives™ on Stack Overflow

Setting up Meteor, Vue and Typescript

1 Answer 1

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

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related