Vetur: custom blocks support

[nicolo-ribaudo]

vue-loader supports custom blocks.

It would be cool if also vetur supports them, for example with a configuration similar to this one:

{
    // ...
   "vetur.custom_blocks": {
      "docs": "markdown",
      "unit-test": "javascript"
   }
}

<!-- component.vue -->

<template></template>
<script></script>
<style></style>

<docs>
# This md code is correctly highlighted
</docs>

<unit-test>
// This js code is correctly highlighted
</unit-test>

[octref]

This seems impossible to implement, since docs can easily be doc or other names, so I can't write a grammar that just parses its inside using md grammar.

If docs get adopted in Vue SFC spec I can probably highlight its inside as md.

The grammar is not dynamic by nature so I can't change the grammar at runtime. However, if such setting goes in Vue SFC spec,

<docs lang="md">
# md
</doc>
<unit-test lang="js">
js code
</unit-test>

I can write grammars to support it.

[nicolo-ribaudo]

I set up a demo of how this feature could work:
https://github.com/nicolo-ribaudo/vetur-custom-blocks-demo

If you don't want to integrate something like this into vetur (because it is a bit hacky, since it generates the grammar at runtime), I can mantain it as a separate extension

[octref]

That would actually work...OK I'll look into it.
Regenerating the grammar and letting the user restart sounds fine.
I think the best workflow would be to provide a command, like Cmd+Shift+P -> vetur: Regenerate Grammar. Once user changes local setting and run the command, vetur would rebuild the grammar according to the setting and set it as the grammar.

[hasanakg]

Any progress in this issue? It would be great to redefine grammar to be able to highlight custom syntax of libraries like vue-i18n.

[aight8]

I have the same "problem". It would be nice if I can define the block as json or yaml.
Or a create a block for custom extraction for markdown doc parts.
Would be AWESOME.

[octref]

Published in 0.11.1

@nicolo-ribaudo Thanks again for coming up with this idea. I honestly thought it was impossible.

[omarfouad]

Can we use this to add support for SASS style in .vue files?

Something like
"style": "sass"

[octref]

@omarfouad No, just write <style lang="sass">.