Run & review this pull request in StackBlitz Codeflow.

There might be cases like v-else-if or v-show too. Is there some generic way to solve this instead of having to list out each directive manually? 👀

Also, I believe getPropsToString in islandsTransform.ts doesn't handle props with hyphen properly:

getPropsToString({'foo-bar': 'baz'}) // gives --- [{ foo-bar: `baz` }]

which is invalid JS. (maybe needs ${JSON.stringify(name)})

indeed thank you ! I'm currently working on changing the way slots and client works internally to make this work for non-SFC too.

For now I think we only need to extract a few directive, I believe we still want to leave directive on the component (other than v-if/else/elseif)

Also, I believe getPropsToString in islandsTransform.ts doesn't handle props with hyphen properly:

This is still not fixed. Or is it guaranteed that the passed bindings won't contain any name having any character other than :a-zA-Z 👀

If not, then something like this at line 162 of packages/nuxt/src/components/islandsTransform.ts might be better:

  const content = Object.entries(bindings).filter(b => b[0] && b[0] !== '_bind').map(([name, value]) => isBinding(name) ? `[\`${name.slice(1)}\`]: ${value}` : `[\`${name}\`]: \`${value}\``).join(',')

oops sorry, i completly forgot about that ! thanks !