symfony / webpack-encore

A simple but powerful API for processing & compiling assets built around Webpack
https://symfony.com/doc/current/frontend.html
MIT License
2.23k stars 199 forks source link

Vue + typescript #702

Open Atala opened 4 years ago

Atala commented 4 years ago

Hi ,

I am using vue + typescript. Thanks for your PR #484. On my project it didn't work out of the box, I needed to add a typescript definition file in my project (as stated here https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components)

// ./src/vue-shim.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

I could not build before :

 ERROR  Failed to compile with 1 errors                                                                                                                                               15:29:42

 error  in xxxx/js/prof/sequences-list.ts

[tsl] ERROR in xxxxx/js/prof/sequences-list.ts(2,27)
      TS2307: Cannot find module '../components/resourcesList.vue'.

I have a low level of Vue understanding (well I am setting up my first project), but it maybe interesting to add it into the docs.

[EDIT] : actually it may be because of this, https://fr.vuejs.org/v2/guide/typescript.html#Utilisation-de-base , so maybe it is worth mentionning ?

cc @Lyrkan

seyfer commented 4 years ago

@Atala please show your sequences-list.ts content, your tsconfig.js and webpack.config.js.

Lyrkan commented 4 years ago

Hi @Atala,

From what I understand it happens when you don't have a <script lang="ts">...</script> with a default export in your .vue file.

Adding the vue-shim.d.ts file makes it so you don't have to create a block that only contains import Vue from "vue"; export default Vue; in SFCs that are not associated to any script.

Since Encore does not add any file to projects using it (at least for now) maybe that should indeed be documented somewhere.

Atala commented 4 years ago

I think that may be the case. Not 100% sure + I don't have example files because I was moving things around at the time. Sorry :(

I'll let you decide if it is worth to add to your docs (IMHO it is worth to add it in the vue.js section)

BurningDog commented 1 year ago

For Vue 3 the contents of vue-shim.d.ts should be:

declare module '*.vue';
carsonbot commented 1 month ago

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?