Login/Register
Webpack: prerender web component into HTML snippet?
Asked Answered
javascriptwebpackvue.jstwigsingle-page-application
A

1

7

tl;dr: Can I create a fully rendered HTML snippet to include into server-side (Twig) templates?

Basically, I need to convert Webpack entrypoints into rendered HTML. Linked CSS and JS files are OK, if they are not necessary for basic functionality. Ideally, this would support Vue.js components, and integrate with Vue CLI.

So, I have a PHP codebase with a lot of Twig templates rendered server side. I am gradually replacing and adding features with Vue.js; currently this means exporting discreet static JS modules via Webpack entrypoints. This works well for the most part.

Now I want to recreate the site's header. Usually the client displays a brief flash as it loads one of my static modules; this is not acceptable for the header, which needs to be instantly available.

The header does not currently use any dynamic data, although it may in the future. (It would be nice to link to an Ajax library at some point, but the header should at least load all available DOM elements without JavaScript.)

I am looking at the Vue Prerender SPA Plugin, which might do the trick, but it apparently focuses on entire routes. I am not using Vue-Router in this case: I don't need/want an entire route, only a single component. I don't even want an <html> or <body> tag; my top-level tag might be a <div> for example.

Bonus points: how todo as a Vue CLI plugin, for multiple Webpack entrypoints?

Thanks!

Assessor answered 1/3, 2018 at 16:24 Comment(4)
I found the information in the context of laravel vuejsdevelopers.com/2017/04/01/vue-js-prerendering-node-laravel – Holophytic
Thanks @МаксимК, but I think this is the same deal: pre-rendering entire routes with the prerender-spa-plugin. I don't see anything about individual components/entrypoints. – Assessor
Next.js might be library you be interested in. General idea here is you have JS framework which you want to pre-rendered content from your server. I do not believe this can be only handled with Webpack or atleast it would be a bit tricky and needed to use Webpack dev server some sort of. – Jeri
thanks @JimiPajala, I'll look into it. I haven't heard of Next.js before. – Assessor
L
1

if I undestand right you wan to generate a twig template with webpack. I've done this before with ejs and the HtmlWebPackPlugin. In you webpack config something like:

new HtmlWebpackPlugin({
  title: "Twig Entry",
  filename: '../generatedTwigTemplate.twig',
  template: 'twigTemplateTogenerate.ejs',
  inject: 'body'
})

The process is to make the html/twig in the ejs file, run the webpack build with htmlwebpackplugin your css/js assets should get injected and a .twig file should be output ready to use.

Labrum answered 10/5, 2018 at 14:11 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.