Snowpack: template for Vue + Typescript

[axetroy]

Hi!

Before this, I already had an existing project (generated by Vue CLI)

Now I want to migrate to snowpack, but unfortunately, I did not find a template for typescript + vue, and migration documentation.

When I try to migrate, it gives me an HTTP error 500

And there is no error message, I don’t know what to do.

any helps are welcome. Thx.

[drwpow]

Yes! Agree we should have a Vue + TypeScript template, especially one that works out-of-the-box migrating from Vue CLI, if possible.

We’d love a PR if anyone is able to tackle this.

[spikyjt]

I'm currently setting this up for a new project (Vue 3), so will report back with how I get on and plan to create a template once it is stable.

If successful, I may try porting a previous Vue 2 project to snowpack, although I'm not certain that is possible. Would be worth the OP stating which version of Vue they are on.

[FredKSchott]

@spikyjt that sounds great! any luck??

[spikyjt]

@FredKSchott I've been distracted with other things, but so far ended up with WSOD using the sample app used in the Vue CLI generator!

[spikyjt]

@FredKSchott I've had another look, but gone down a black hole with Single-File Components. Is there a loader for Typescript in <script> tags in SFCs? Plain JS works fine, so something is extracting the scripts. Anything that we can plug in for this? It's a non-starter without it.

[FredKSchott]

I don't know the answer, unfortunately. Svelte has https://www.npmjs.com/package/svelte-check, I wonder if Vue has something similar. Maybe Vue doesn't fully support TS? Curious if anyone knows how this might work!

[spikyjt]

@FredKSchott Vue 3 is written in TS and Vue has always supported TS fully. The script part of the SFC needs lang="ts" and that's it. In its standard Webpack build, vue-loader builds the TS scripts as required. @vue/compiler-sfc (used by vue-loader and @snowpack/plugin-vue uses babel-parser to build the TS. I can see the code in that which should handle it.

I suspect the problem is with @snowpack/plugin-vue. Looking at its code, it blithely assumes everything in a script block is plain JS. It also assumes all style blocks are plain CSS. Again with these, you should be able to use lang="scss" etc.

I'm willing to contribute, let's continue this discussion on Discord.

[Akimyou]

984 , Will support Vue + Typescript in this merged PR.

Please try on master now.

[axetroy]

@Akimyou Thanks for your great job!:+ could you add an example for this?

[Akimyou]

Example:
https://github.com/Akimyou/snowpack/tree/feature/plugin-vue-enhance-demo/create-snowpack-app/app-template-vue-typescript

official template will be add after next release.

[Akimyou]

PR here: #1088

[FredKSchott]

Completed in #1088. Thanks @Akimyou !