support for vue?

[webdevcody]

I was trying to use lang='civet' using this vite plugin, but it doesn't seem to work. Any clue if that's something easy to add in?

[edemaine]

The following code transforms <script src="foo.civet"></script> content:

https://github.com/lorefnon/vite-plugin-civet/blob/6e030114d33d53519eee2198ad8891c3a4747279/src/index.ts#L64-L73

I'm guessing you want the ability to write

<script lang="civet">
console.log "hello world"
</script>

? That shouldn't be difficult to add to this function. I'm less certain on whether transformIndexHtml would be enough for Vue though; we might need to specially handle .vue files?

[lorefnon]

To support .vue files we'd likely need to add an integration with https://www.npmjs.com/package/@vue/compiler-sfc, but unfortunately I don't have time to implement this. Happy to merge this if someone is willing to contribute.

Alternatively, you can use the jsx support in vue which is more concise & pleasant with civet instead of sfcs.

[angelhdzmultimedia]

To support .vue files we'd likely need to add an integration with https://www.npmjs.com/package/@vue/compiler-sfc, but unfortunately I don't have time to implement this. Happy to merge this if someone is willing to contribute.

Alternatively, you can use the jsx support in vue which is more concise & pleasant with civet instead of sfcs.

I immediately thought about @vue/compiler-sfc when I saw the docs of Civet & Vite plugin but didn't understand it. But I recently played with Vue Macros Full SFC and they convert TSX to valid Vue components, so I thought to myself "it shouldn't be hard".

So in the meantime, I will create a script that converts all the .civet files containing default-exported Composition API objects into .ts, and then using them with . 😁 That's all I can think of!

(I don't see how to use TSX with Civet and Vite plugin, if anyone have a guide, I will appreciate it a lot).