Bud-vue with typescript

I am trying to use Bud with Vue and Typescript. It is not really clear to me how to get this working.

  • I used this example to get Vue working with JS: @roots/bud-vue | bud.js
  • I installed bud-typescript and added a tsconfig.json, like the guide tells me

Typescript works, it compiles to JS, however my Vue templates do not compile (having lang=“ts”). I get this error in my browser’s dev tools:

Uncaught Error: Module parse failed: Unexpected token (3:27)
File was processed with these loaders:

  • ./node_modules/vue-loader/dist/templateLoader.js
  • ./node_modules/vue-loader/dist/index.js
    You may need an additional loader to handle the result of these loaders.

Can someone please guide me how to get this working?

1 Like

I have the same problem.

I know we need to add in Ts rules:

options: {
   // Tell to ts-loader: if you check .vue file extension, handle it like a ts file
   appendTsSuffixTo: [/\.vue$/]
}

when I do a console.log of the rules I don’t see that from ts or tsx, i try:

.tap((bud) => {
      bud.build.items.ts.setOptions({  appendTsSuffixTo: [/\.vue$/] });
    })

But ts or tsx is undefined

Would love an answer to this too.

I can get to the ts item on config.after and update it, but it has no affect.
I’ve also tried different hooks but to luck.

As an aside, this software is so clunky, the documentation is seriously lacking and semver isn’t being followed at all… bit frustrating that Bud is the goto for Roots when there are much better solutions available

I just noticed in v6.7.0 there was a change to allow directly adding webpack rules, which is great because sometimes you don’t actually need to abstract everything!.. who would’ve thought…

Anyway, for anyone that is stuck on this and confused as to why interacting with this spaghetti code isn’t working… just add the rule

Example - in your bud.config.mjs file

  bud.hooks.on('build.module.rules.oneOf', (rules = []) => {
    rules.push({
      test: /\.ts$/,
      loader: 'ts-loader',
      options: { appendTsSuffixTo: [/\.vue$/] }
    });

    return rules;
  })

Hey @patrickdorival — welcome to Roots Discourse!

This comment is lacking any sort of helpful feedback. Did you wake up this morning and decide to shit on an open source maintainer? Who does that?

Clunky? What does that even mean?

What can be improved in the documentation? Be specific

Why are you using Bud if it frustrates you so much? What does the “goto for Roots” even mean? The fact that it’s used in the Sage starter theme? Why don’t you treat Sage as a starter and replace Bud with your own build tool of choice?

Actually… we don’t need to hear anything else from you. You’re not welcome here. :wave:

2 Likes