Vue as template language

Hi,
In the last few projects I’ve used many template languages like Handlebars, Nunjucks and Pug/Jade, but I’m missing the flexibility and readability provided by Vue.js or JSX-enabled templates when it comes to nesting components. In the end something like

<MyComponent>
  <Carousel :images="[...]" />
</MyComponent>

Looks much more readable then

+MyComponent()
  +Carousel([...])

Not mentioning that those template languages don’t provide render props or named slots functionalities.

My stack at the is build on Gulp as build tool with separate tasks for JS, HTML and SCSS, so I was wondering if and how I could use Vue.js as template language.

I’ve seen projects like Nuxt, but maybe it’s too much for my current needs. My main issue is how to provide components to pages.

Thanks!

So you don’t want to just use Vue like normal? :thinking:

Vue’s templates don’t generate HTML, like JSX they create JS render functions that needs the Vue runtime to run in the browser.

You could use Vue’s SSR to generate HTML, which could be useful if you want to make email templates with Vue for example, but to make a website like that would be pretty weird.

Hi, thanks for the reply.

Actually my scenario is somewhat similar to that of an email campaign page: a designer handles me layouts, I code them as individual pages and components and then handle the output source and HTML to a 3rd party backend developer who converts it to CMS templates.

Not the finest workflow I know…

Why is it weird? Vue website itself says you can use Vue like this – Introduction | Vue.js templates do ultimately generate HTML. The fact that there are intermediary render functions is really irrelevant.