Propose: Better support Vue simple use cases

[joshgoebel]

Vue

The two examples I found fast:

• https://github.com/metachris/vue-highlightjs/blob/master/index.js
• https://github.com/ItsJimi/v-highlightjs/blob/master/index.js

Both use directives... wouldn't you really want a component for this though? What I have so far for Vue:

<highlightjs language="javascript" code="var x = 5;" />
<highlightjs language="javascript" v-bind:code="sourceCode" ignore_illegals />
<highlightjs v-bind:code="sourceCode" />
<!-- or to be explicit -->
<highlightjs auto :code="sourceCode" />
<highlightjs autodetect :code="sourceCode" />

Using a slot for passing in code has all the same problems of using a non-PRE tag in HTML and many additional problems so that doesn't seem like a good route, so I've rule that out.

Vue questions:

• Component vs directive.
• Dash or no dash or is that something that you should configure when you setup the plugin, ie using a custom tag name?
• Would people be expecting to configure the whole library via HTML "attributes" though? I suppose you could have an options attribute thought that took an object...

[andrewQwer]

For React.js I use the following simple wrapper.

Editor: Moved sample code to the React thread: #2537

[joshgoebel]

I can't use highlightBlock as it writes directly to DOM node's innerHTML

Right, that's clear... support for these type of frameworks is going to be a module/component of whatever that builds on top of the base highlight method. I'd just like to see if perhaps we could include the base component to give people a starting place.

[joshgoebel]

@andrewQwer Moving you to a new React thread so this one can be Vue, probably never should have mixed them.