如何在Nuxt 3 Vite项目中使用SSR与模板？

Question

在Nuxt 2中，我可以使用服务器端呈现的模板组件，方法是利用模板包中提供的renderToString()方法和一个Nuxt挂钩相结合，如下所示：

import { renderToString } from '[my-components]/dist-hydrate'

export default function () {
  this.nuxt.hook('generate:page', async (page) => {
    const render = await renderToString(page.html, {
      prettyHtml: false
    })
    page.html = render.html
  })
}

自从最近发布模版2.16.0以来，我就可以在由Vite驱动的Nuxt 3中使用本地web组件。然而，我还没有找到一种方法来连接模板水化过程。不幸的是，还没有可组合useHydration()的文档。

有人知道我怎样才能让这个在Nuxt 3工作吗？

Answer 1

我也有同样的问题。我通过模块解决了这个问题。

1. 创建一个新的自定义nuxt模块。创建模块的文档
2. 在generate:page钩子的安装方法钩子中： Nuxt.hook(生成:页，异步(页) => { const呈现=等待renderToString( page.html，{ prettyHtml: true，})；page.html= render.html；})； nuxt钩子文档 )
3. 通过nuxt.options.css.push(PATH_TO_CSS)注册所需的css类
4. 在nuxt配置中注册模块。 注意:确保在nuxt.config.ts中，defineNuxtConfig作为缺省值导出。
5. 点击nuxt配置中的vue编译器选项： vue：{ compilerOptions：{ isCustomElement：(标记) => TEST_TAG_HERE，}，}，
6. 这取决于您如何不使用自定义元素。在我的例子中，我在我的app.vue文件中定义了模具加载程序上的元素： 从‘/>导入{ defineCustomElements }；defineCustomElements()； 您还可以在组件中导入所需的元素，然后在那里定义它们，例如在example.vue组件中： 从‘/定制-元素’导入{ CustomElement }；customElements.define(‘定制-元素’，CustomElement)；

下面是来自我的模块和配置的一个例子：

/模块/sdx.ts

import { defineNuxtModule } from '@nuxt/kit';
import { renderToString } from '@swisscom/sdx/hydrate';

export default defineNuxtModule({
  meta: {
    name: '@nuxt/sdx',
    configKey: 'sdx',
  },
  setup(options, nuxt) {
    nuxt.hook('generate:page', async (page) => {
      const render = await renderToString(page.html, {
        prettyHtml: true,
      });
      page.html = render.html;
    });
    nuxt.options.css.push('@swisscom/sdx/dist/css/webcomponents.css');
    nuxt.options.css.push('@swisscom/sdx/dist/css/sdx.css');
  },
});

重要的：只有当stenciljs包支持水化，或者换句话说，有水合物输出时，这才有效。阅读更多这里

./nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';

//v3.nuxtjs.org/api/configuration/nuxt.config export default
export default defineNuxtConfig({
  typescript: { shim: false },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => /sdx-.+/.test(tag),
    },
  },
  modules: ['./modules/sdx'],
});

./app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
import { defineCustomElements } from '@swisscom/sdx/dist/js/webcomponents/loader';

defineCustomElements();

// https://v3.nuxtjs.org/guide/features/head-management/
useHead({
  title: 'demo',
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
  charset: 'utf-8',
  meta: [{ name: 'description', content: 'demo for using a stencil package in a nuxt ssr app' }],
  bodyAttrs: {
    class: 'sdx',
  },
});
</script>

更新

我用多个组件测试了我的设置，看起来您无法在模块中定义组件。我更新了我的工作解决方案的答案。

Answer 2

在defineNuxtPlugin中试试这个

  nuxtApp.hook('app:rendered', () => {
    const response = nuxtApp.ssrContext?.res
    if (!response)
      return
    const end = response.end
    response.end = function(chunk) {
      chunk = 'hijacked'
      end(chunk)
    }
  })