1

I want to use a Docker multi-stage build with Vue.js in the first stage and a Web server in the second.

Starting with the official node image from Docker Hub, I'm trying to:

  • either install the relevant packages (vue and vuetify@3.0.4 which I need for v-data-table; I'm not sure if I should install them globally or not, or if it even makes much difference in this use case) and run node render.mjs with render.mjs written by me and containing imports of necessary stuff from those packages,
  • or go the Vue CLI way, create a Vue project and see what's possible from there (with the obstacle that it's designed to run interactively – in npm init vue -y the -y is apparently ignored; people filed an issue and came up with some shenanigans in the comments but I'm not sure it's the best solution).

I just want one or a couple of templates (or vnodes, or whatever ends up working) to be rendered in the first stage, copy the results (HTML documents) to the second stage and have no Vue.js running on containers created from the final image (one with the Web server). (I'm fine with some scripts being required on the client side. If I'm not mistaken, that's how Vuetify's data-table can work, load initial data from a totally separate database and provide CRUD functionality.)

What should I put in my Dockerfile (and possibly in render.mjs) for the first stage?

ByteEater
  • 885
  • 4
  • 13
  • I think you might want to use a headless browser like puppeteer. they can be easily dockerized to run client side code. other way is to use server side rendering to render the component at node server. vue.js 3 comes inbuilt support for SSE so it should be possible to run inside docker. – AACaN Apr 12 '23 at 09:48
  • I want no Vue.js in the second (final) image. So wouldn't that be SSG, not SSR? – ByteEater Apr 14 '23 at 16:05
  • If your content is 100% static why not use something like vitepress? it'll generate the full static site and put out html – AACaN Apr 17 '23 at 18:44
  • @AACaN, can VitePress be easily used non-interactively? My goal is to generate the site in one stage of building a Docker image and have no Vue.js related stuff in the final stage. I've tried several tools (maybe even VitePress, I don't remember) but all of them were designed to be used only in interactive mode. You can't e.g. start them with a parameter indicating that a configuration file should be consulted instead of asking the user a series of questions. – ByteEater Apr 17 '23 at 20:59
  • 1
    Sorry I meant to say vue press (since you're using vue components, vitepress does not support vue components). and yes, after generating the vuepress site there are no vuejs depenedencies as it's rendered to static site. and vuepress build command can run without user input (i run it in github actions without any issue) – AACaN Apr 18 '23 at 05:38

0 Answers0