#How to configure Nest to be able to import .vue files

1 messages · Page 1 of 1 (latest)

wheat belfry
#

I need to do a server render on a Nest app, but instead of using handlebars, I need to use .vue files.
The problem is that when the service imports a .vue file, it throws an error in the console because it doesn't recognize .vue files and says stuff like unexpected token 🤔

humble olive
#

handlebars is just a template engine
it lets you render html from a server it self with some placeholders for variables as well

vue is a entire front-end framework
a completely different beast
it doesn't work the same way

nest cant render a vue page like it can do basic html

although vue supports SSR
https://vuejs.org/guide/scaling-up/ssr.html#ssr-vs-ssg

you could enable SSR and send html from nest with http request and load it into vue
you would still have to run nest and vue separate

Server-Side Rendering (SSR) | Vue.js

Vue.js - The Progressive JavaScript Framework

lost merlin
#

nest cant render a vue page like it can do basic html
Well, Nest doesn't do that, but you should be able to use the linked functions createSSRApp and renderToString to get the resulting html, which nest could return. You'd load the some.vue template from filesystem instead of importing it.

It probably becomes unmanageable the moment your vue template contains a single import though.

humble olive
#

enabling SSR and running both apps separate
and vue fetching with GET requests to nest and nest returning html
is prob the cleanest

wheat belfry
#

@lost merlin @humble olive
I don't need Nest to render anything, what I need is just to import a vue file successfully in a nest service file, from there as mentioned, the vue file will go through createSSRApp and renderToString and then pass the returned HTML string to the response
The issue is that when I import a .vue file, app crashes and throws errors.
For example .vue files start usually with

<template>
 <p>some html markup</p>
</template>

and I get the error "Unexpected token <template ...."
Maybe because Im trying to import a .vue file in a .ts file ?

blazing reef
#

How are you importing the vue file? What are your doing with it?

humble olive
#

You lost everybody already after:
Importing a vue file into nest service

You want to run a vue file into nest or something what

#

I think i start to understand...

lost merlin
wheat belfry
#

ok let me give you some context of why im importing a vue file in a nest service
I have a Vue frontend app & Nest backend

On the frontend, I have a .vue file which is for a preview of an Invoice
On the backend I'd like to use that same preview file because It goes through a pdf service on a puppeteer headless browser and gets returned to the frontend so it can be downloaded.

#

For the backend I could use something like handlebars, but that means that I'd need to maintain the look of the Invoice in both frontend and backend, so the best solution would be to have it only in 1 place and make it work in both FE and BE

wheat belfry
humble olive
#

trying to import a vue file so you can run the vue's createSSRApp
so you can renderToString so you can get the html
so you can get some invoice file meant as preview so you can process it on your back-end
and return it to the frontend where it can be downloaded?

wheat belfry
#

exactly

#

the idea is to maintain this "invoice preview" file only on the frontend

#

thats why its a vue file

#

but the root of the problem was that I couldn't import that .vue file in a nest service file

#

idk if it was Nest or TS though

#

haven't tried @lost merlin 's suggestion of how to import it yet, but will a bit later, hope it works that way

humble olive
#

sounds like are you scraping some example file shidspicion_arises ?
that isn't yours to start with

wheat belfry
#

not sure I understand what you mean

#

both FE and BE projects are written by me

humble olive
#

why not save that file on the back-end
process a copy of it, then return it to the client

wheat belfry
#

because this file would constantly change on the frontend, and the PDF that gets downloaded needs to look exactly the same

#

also in the future there would be multiple "themes" of that invoice preview file

#

it's all in a monorepo, so there's no need to copy it

humble olive
#

so it gets processed on the front-end as well
sounds like where the mistake started

wheat belfry
#

one project can import from another project

#

its a regular .vue file, it works just as expected on the frontend

#

the backend just needs to read it, parse it to pure HTML and return it as a PDF buffer to the frontend so it can be downlaoded

#

the "invoice preview" vue file also accepts some props, so its not static, meaning that it's content changes dynamically based on context

humble olive
#

i think i start to see what is going on

but why isn't the client uploading it to the back-end
process it and then saves the processed file
on a place where the client can access it back again?

#
  • client http post
  • server saves file
  • server process it
  • server saves (or even overwrites the old file if needed) in a public directory
  • client gets file from public direcory and displays it
wheat belfry
#

Dont think this flow is right

#

Theres no need to save the file anywhere else as it exist in the vue app, its just a vue template which expects dynamic data. It would basically display different data for every user, even different data for every invoice

#

Imagine that the vue file is something like a profile card, where u have username, avatar, etc…

#

U display that profile card on the client, but also need to be able to download it as a pdf

#

So the backend needs to import that vue component, get user from db and add the dynamic props to the component, compile to vanilla html and return it to the client as a pdf buffer

humble olive
# 
const name = 'weshuiz13'
console.log(`hello ${name}`)
// hello weshuiz13
``` ![shrugs](https://cdn.discordapp.com/emojis/240813604469735424.webp?size=128 "shrugs")
#

there, now you can use dynamic data in your files
lets for now ignore the security problems that comes with this

wheat belfry
#

the .vue component file is not a js string that can be interpolated like that

humble olive
#

you dont need the vue component

#

if you want to process a file on the back-end like a pdf with user input
all you need is the client to post the file with some form fields

use your processing, place the field inputs values on it
and save it processed in a diredtory where the client can access it back

humble olive
#

if you need to proccess anything, do it on the back-end and only the back-end

lost merlin
#

@humble olive while Vue might not be the best fit for the stack, it's a valid requirement and use-case. I believe the fs.readFileSync method I mentioned will work fine in combo with the createSSRApp as long as it's a self-contained component which includes all the scripts and stylesheets (no imports).

humble olive