Vue-Cli template/TypeScript support?

[hawkerm]

I started my project with the new vue-cli builder (it'd be great to have a template for vue-babylonjs to help getting started easier).

Anyway, since I set my project up with TypeScript, I'm having trouble importing vue-babylonjs in my main.ts file:

Could not find a declaration file for module 'vue-babylonjs'. 'node_modules/vue-babylonjs/dist/umd.js' implicitly has an 'any' type.

Because of that I think I'm not importing the lib correctly, I tried just Vue.use(require('vue-babylonjs')); instead, but am getting an error of Unknown custom element: <Scene> when I load my component/page.

Any advice? Thanks!

[hawkerm]

Ah, I didn't go far enough with VS Code's help last time (I didn't save its changes to the tsconfig file). I was able to get going by having VS Code generate the dummy type file (with no types). I still get a red-squiggle, but it seems I can ignore it.

[BrainBacon]

TypeScript typings support is something I'm definitely interested in adding, but I probably won't start to prioritize it until after Vue 3 is out. There's definitely a lot that could be done to integrate the typings with Babylon.js as well. I'm on the fence about switching the source code of this library to TS, but I believe there's ways to do it without switching the source. If you have any ideas or comments here I'm all ears.

[hawkerm]

I'm unfortunately not well versed in js/ts library development, at least as much as I'd like to be, so no comment there. As far as I understand though, a .d.ts file can be generated/created and included without the library being written in TypeScript.

I can understand waiting for Vue 3, Babylon 4 will be out by then too. It sounds like a Babylon 4 was getting more stabilized from a recent tweet, so I'm looking to start playing more with that.

[BrainBacon]

Yeah when Babylonjs 4 is good I plan on releasing a build with some new features. For now there's not much point to restructuring the build more than once. As for the CLI template, I'll probably release that with 1.0 stable.

[davidAlittle]

I got around this by adding "noImplicitAny" : false, to the "compilerOptions" section of my tsconfig.json file.

[notwhoyouthink1]

Ah, I didn't go far enough with VS Code's help last time (I didn't save its changes to the tsconfig file). I was able to get going by having VS Code generate the dummy type file (with no types). I still get a red-squiggle, but it seems I can ignore it.

@hawkerm Im getting the same issue as you but no vscode quick fix, could you copy in the blank import it generated?

[SnowNooDLe]

Simply add

declare module 'vue-babylonjs'

in shims-vue.d.ts in src directory.

So, in your main.ts will have

import vb from 'vue-babylonjs';
Vue.use(vb);

in shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

declare module 'vue-babylonjs'

Reference