Nuxt - sgml/signature GitHub Wiki

project-root/
├── dist/
│   └── MyComponent.js            # Pre-bundled script (optional with Vite, Grunt, etc.)
├── src/
│   └── MyComponent.vue          # Your Vue 2 SFC with template/script/style
├── output.html                  # SSR-rendered output HTML
├── vue2-offline-renderer.js     # Main renderer script using vue-template-compiler
├── vite.config.js               # Optional if using Vite to bundle scripts
├── Gruntfile.js                 # Optional for pre-bundling with Grunt + Browserify
├── gulpfile.js                  # Optional for legacy Gulp support
├── package.json
└── node_modules/

/**
 * Setup:
 * npm install vue vue-server-renderer vue-template-compiler @vue/component-compiler-utils postcss postcss-selector-parser
 *
 * Run:
 * node vue-offline-renderer.js
 */

// 👉 Vue 2: https://www.npmjs.com/package/vue
// 👉 Vue 3 equivalent: https://github.com/vuejs/core (via `vue` export)
const Vue = require('vue');

// 👉 Vue 2: https://www.npmjs.com/package/vue-server-renderer
// 👉 Vue 3 equivalent: https://github.com/vuejs/core/tree/main/packages/server-renderer
const renderer = require('vue-server-renderer').createRenderer();

// 👉 Node.js core modules (no Vue 3 equivalent needed)
const fs = require('fs');
const path = require('path');

// 👉 Vue 2: https://www.npmjs.com/package/vue-template-compiler
// 👉 Vue 3 equivalent: https://github.com/vuejs/core/tree/main/packages/compiler-sfc
const compiler = require('vue-template-compiler');

// 👉 Vue 2 utility wrapper: https://www.npmjs.com/package/@vue/component-compiler-utils
// 👉 Vue 3 equivalent: superseded by `@vue/compiler-sfc` → https://github.com/vuejs/core/tree/main/packages/compiler-sfc
const compilerUtils = require('@vue/component-compiler-utils');

// 👉 PostCSS: universal processor used in both Vue 2 and 3
const postcss = require('postcss');

// 👉 Used in scoped style transformation; not Vue-specific
const selectorParser = require('postcss-selector-parser');

/**
 * Setup:
 * npm install vue @vue/compiler-sfc @vue/server-renderer postcss postcss-selector-parser
 *
 * Run:
 * node vue3-offline-renderer.js
 */

// 👉 Vue 3 core: https://github.com/vuejs/core/tree/main/packages/vue
const { createSSRApp } = require('vue');

// 👉 Vue 3 SSR renderer: https://github.com/vuejs/core/tree/main/packages/server-renderer
const { renderToString } = require('@vue/server-renderer');

// 👉 Vue 3 SFC compiler: https://github.com/vuejs/core/tree/main/packages/compiler-sfc
const { parse, compileTemplate } = require('@vue/compiler-sfc');

const fs = require('fs');
const path = require('path');

// 👉 PostCSS: used in Vue 2 & 3 for style transforms
const postcss = require('postcss');

// 👉 Scoped style emulation: not Vue-specific
const selectorParser = require('postcss-selector-parser');

// Load and parse the .vue file
const filePath = path.resolve(__dirname, 'MyComponent.vue');
const source = fs.readFileSync(filePath, 'utf-8');
const { descriptor } = parse(source);

const scopeId = `data-v-${Math.random().toString(36).slice(2, 5)}`;

// Compile template into a render function
const { code: renderCode } = compileTemplate({
  source: descriptor.template.content,
  filename: 'MyComponent.vue',
  id: scopeId,
  scoped: true,
  compilerOptions: {
    mode: 'function',
  },
});

// Evaluate the <script> content
const exports = {};
new Function('module', 'exports', descriptor.script?.content || '')({ exports }, exports);

// Process scoped <style> block
let scopedCSS = '';
const style = descriptor.styles.find(s => s.scoped);
if (style) {
  postcss([
    root => {
      root.walkRules(rule => {
        rule.selectors = rule.selectors.map(sel =>
          selectorParser(selector => {
            selector.each(node => {
              node.append(selectorParser.attribute({ attribute: scopeId }));
            });
          }).processSync(sel)
        );
      });
    }
  ])
  .process(style.content, { from: undefined })
  .then(result => {
    scopedCSS = `<style>${result.css}</style>`;
    render();
  });
} else {
  render();
}

// Render component to static HTML
function render() {
  const Component = {
    ...exports,
    render: new Function('Vue', renderCode)(require('vue')),
    __scopeId: scopeId,
  };

  const app = createSSRApp(Component);
  renderToString(app).then(html => {
    const finalHTML = `
      <!DOCTYPE html>
      <html>
        <head>${scopedCSS}</head>
        <body>${html}</body>
      </html>
    `;
    fs.writeFileSync(path.resolve(__dirname, 'output.html'), finalHTML, 'utf-8');
    console.log('✅ HTML written to output.html');
  }).catch(err => {
    console.error('❌ Rendering error:', err);
  });
}

  assets:                    # Asset files such as styles, images
    - ...
  components:                # Vue components
    - ...
  composables:               # Composition API functions
    - ...
  content:                   # Content files for @nuxt/content
    - ...
  layouts:                   # Layout components
    - ...
  middleware:                # Middleware functions
    - ...
  pages:                     # Page components for routing
    - ...
  plugins:                   # Plugins to extend Vue
    - ...
  public:                    # Static assets
    - ...
  server:                    # Server-side code (e.g., API routes)
    - ...
  stores:                    # Pinia or Vuex stores
    - ...

{
  "scripts": {
    "generate": "cross-env NUXT_TARGET=static nuxt generate"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}