API endpoint generating a Vue component as a rendered output

Question

API endpoint generating a Vue component as a rendered output

In the process of developing a document templater service, I am faced with the challenge of handling numerous document templates (contracts, protocols, etc.) written in Vue. The concept revolves around clients sending props in the body, which are then passed to the Vue component (document template). Subsequently, the rendered document is sent back to the client as a response. Vue proves to be an ideal fit for this task due to its user-friendly nature and flexibility required for handling complex templates.

However, the complexity arises from the varied script parts in each type of document. This makes it impossible to simply extract the template part of the component and render it with context. Instead, I need to transpile all sections of my Vue template (script setup + TypeScript, template, and CSS) before specifying the context (props) for my component.

To achieve the transpilation process, I am experimenting with webpack (vue-loader, ts-loader) using a commonjs configuration. Utilizing ESM would require a substantial refactor of my Express app, which is currently quite large.

The issue lies in importing the bundle produced by webpack. Whenever I attempt to import it with the following code snippet:

export async function loadSSRTemplate(templateName: string) {
  // Although I use commonjs, this section operates on a typescript layer that is not yet compiled
  // @ts-ignore
  const bundle = await import('@/ssr/dist/main.js');
  console.log(bundle.default); //this always returns undefined
  return bundle[templateName]; //similarly, this doesn't work as intended
}

I struggle to find a method to import my transpiled Vue components from the bundle so they can seamlessly integrate with createSSRApp and the h() method within my templater service.

While I understand that the problem may not be apparent without delving into the complete configuration and structure of Vue components, I seek guidance from those who have encountered similar scenarios in the past. Is this feasible or am I investing my efforts in vain?

PS: If there are alternative technologies that could address this challenge effectively, feel free to suggest them. Nonetheless, if possible, I prefer performing the transpilation beforehand via build processes for enhanced performance.

My tech stack: Templates: Vue 3 + TypeScript + Composition API (setup script) + Webpack 5.9

Service: Node 18 (Express) + TypeScript. Dockerized using Node:18. Execution through ts-node-dev with commonjs config

EDIT: For those interested in further details, here is my webpack configuration:

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
  target: 'node',
  mode: 'development',
  entry: './webpack-entry-point.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    libraryTarget: 'commonjs2',
  },
  externals: nodeExternals({
    allowlist: /\.css$/,
  }),
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '@templates': path.resolve(__dirname, './templates'),
    },
    extensions: ['.ts', '.js', '.vue', '.json'],
  },
  plugins: [new VueLoaderPlugin()],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

The entry point comprises a simple JavaScript file that imports all top-level components and exports them, for example:

import NajomnaZmluva from '@templates/reality_module/NajomnaZmluva.vue';

export { NajomnaZmluva };

Here is a glimpse of the render method implementation in my templater service:

async render(id: string, data: any): Promise<string> {
  if (!process.env.SSR_DOCUMENT_TEMPLATE_PATH) {
    console.error('SSR_DOCUMENT_TEMPLATE_PATH is not defined');
    throw new UnknownServerError();
  }

  const documentTemplate = await this.retrieve(id);

  if (!documentTemplate.schema) {
    throw new BadRequestError(
      responsesConstants.errors.badRequestError.schemaNotDefined,
    );
  }

  this.validateSchema(
    documentTemplate.schema as Record<string, schemaType>,
    data,
  );

  //The template name will be dynamically specified; the hardcoded value here serves testing purposes only
  const Template = await loadSSRTemplate('NajomnaZmluva');

  //I cannot determine if the code below functions correctly since I am stuck at loading the bundle

  const ssrDocument = createSSRApp({
    template: h(Template, { props: data }),
  });

  return await renderToString(ssrDocument);
}

EDIT: Progress is being made. I will share the solution in a few hours for those eager to delve deeper into this topic.

typescript vue.js express webpack server-side-rendering

Answer 1

Answer №1

If you're looking for a solution and my approach to implementing this functionality, I'll keep updating this answer until I have a fully operational endpoint with the described features.

I managed to resolve the issue where webpack was not generating functional bundles that could export transpiled components. This is specifically for commonjs environments, but I believe ESM works just as well. Here's how I modified the output block (refer to the comments):

//webpack.config.js
...

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    //Change from previous config:
    //I removed libraryTarget: 'commonjs2' and added library: { type: 'commonjs-module' }
    library: {
      type: 'commonjs-module',
    },
  },

...

EDIT: Successfully completed the ssr.util.ts file which manages ssr vue rendering from the webpack bundle

// Import necessary functions and types from Vue and Vue server-renderer
import { renderToString } from 'vue/server-renderer';
import { createSSRApp, h, SetupContext } from 'vue';
import { RenderFunction } from '@vue/runtime-dom';

// Define an interface for the structure of a transpiled Vue component
interface TranspiledComponent {
  ssrRender(props: Record<string, unknown>): RenderFunction;
  setup(props: Record<string, unknown>, context: SetupContext): RenderFunction;
}

// Function to load a transpiled component from a webpack bundle
export async function loadSSRTemplate(templateName: string): TranspiledComponent {
  // @ts-ignore is used to bypass TypeScript checks,
  // as the specific module structure is known at runtime
  //You can problably generate types in webpack to handle this but i didn't find it that important
  const bundle = await import('@/ssr/dist/main.js');
  return bundle[templateName];
}

// Function to render a Vue component with provided props into an HTML string
export async function renderVueComponent(
  Component: TranspiledComponent,
  propsData: Record<string, unknown>,
) {
  // Create a Vue app for SSR with the component and its props
  const app = createSSRApp({
    render() {
      // The 'h' function is used to create a VNode for the component
      return h(Component, propsData);
    },
  });

  // Render the app to an HTML string and return it
  return await renderToString(app);
}

This utility functions seamlessly with my webpack configuration detailed in the question, but you need to adjust the output block as per the code snippet in this response. If you utilize my configuration, two files will be generated - main.js and chunk-vendors.js. Your Vue components are located in main.js, hence that's the file you should load in the loadSSRTemplate function. Additional details regarding my relevant tech stack can be found in the original question.

Answer 2

If you're looking for a solution and my approach to implementing this functionality, I'll keep updating this answer until I have a fully operational endpoint with the described features.

I managed to resolve the issue where webpack was not generating functional bundles that could export transpiled components. This is specifically for commonjs environments, but I believe ESM works just as well. Here's how I modified the output block (refer to the comments):

//webpack.config.js
...

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    //Change from previous config:
    //I removed libraryTarget: 'commonjs2' and added library: { type: 'commonjs-module' }
    library: {
      type: 'commonjs-module',
    },
  },

...

EDIT: Successfully completed the ssr.util.ts file which manages ssr vue rendering from the webpack bundle

// Import necessary functions and types from Vue and Vue server-renderer
import { renderToString } from 'vue/server-renderer';
import { createSSRApp, h, SetupContext } from 'vue';
import { RenderFunction } from '@vue/runtime-dom';

// Define an interface for the structure of a transpiled Vue component
interface TranspiledComponent {
  ssrRender(props: Record<string, unknown>): RenderFunction;
  setup(props: Record<string, unknown>, context: SetupContext): RenderFunction;
}

// Function to load a transpiled component from a webpack bundle
export async function loadSSRTemplate(templateName: string): TranspiledComponent {
  // @ts-ignore is used to bypass TypeScript checks,
  // as the specific module structure is known at runtime
  //You can problably generate types in webpack to handle this but i didn't find it that important
  const bundle = await import('@/ssr/dist/main.js');
  return bundle[templateName];
}

// Function to render a Vue component with provided props into an HTML string
export async function renderVueComponent(
  Component: TranspiledComponent,
  propsData: Record<string, unknown>,
) {
  // Create a Vue app for SSR with the component and its props
  const app = createSSRApp({
    render() {
      // The 'h' function is used to create a VNode for the component
      return h(Component, propsData);
    },
  });

  // Render the app to an HTML string and return it
  return await renderToString(app);
}

This utility functions seamlessly with my webpack configuration detailed in the question, but you need to adjust the output block as per the code snippet in this response. If you utilize my configuration, two files will be generated - main.js and chunk-vendors.js. Your Vue components are located in main.js, hence that's the file you should load in the loadSSRTemplate function. Additional details regarding my relevant tech stack can be found in the original question.

API endpoint generating a Vue component as a rendered output

Answer №1

Similar questions

What is the best way to combine the elements of two arrays within a v-for loop?

What is the best way to add a dynamic URL in <router-link> using VueJS?

Using the `ngrx` library to perform an entity upsert operation with the

Struggling with getting my Vue-CLI app deployed on Heroku

Are all components in Next.js considered client components by default?

Tips for activating multiple buttons at once

Code in JavaScript using VueJS to determine if an array includes an object with a certain value in one of its elements

Guide to configuring a not null property in Typescript Sequelize:

We are encountering an issue in Node.js with Mongoose where an instance of TypeError is being received instead of the required string type for the "path" argument

Are fp-ts and Jest the perfect pairing for testing Option and Either types with ease?

Avoiding Access-Control-Allow-Origin cors issue when integrating with Stripe

Is Vue instance created if element is present?

`Unexpected behavior when using res.redirect()

New development: In Express.js, the req.body appears to be empty and req.body.name is showing up as undefined

How can I continuously retrieve data for server components with Urql GraphQL whenever a request is made?

Is it possible to incorporate underscore.js with express4?

Enhancing Angular2 Routing with Angular4 UrlSerializer for Seamless HATEOAS Link Integration

Fix a typing issue with TypeScript on a coding assistant

Guidelines for Organizing Angular Interface Files and Implementing Custom Type Guards

What categories do input events fall into within Vue?