Package Exports

@closure-next/nuxt
@closure-next/nuxt/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@closure-next/nuxt) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Closure Next Nuxt.js Integration

Server-side rendering support for Closure Next components in Nuxt.js applications.

Installation

npm install @closure-next/nuxt

Usage

Plugin Registration

// nuxt.config.ts
export default {
  plugins: ['@closure-next/nuxt']
};

Component Usage

<template>
  <closure-component
    :component="MyClosureComponent"
    :props="{
      title: 'Server-rendered component'
    }"
    :ssr="true"
  />
</template>

<script>
import { MyClosureComponent } from './MyClosureComponent';

export default {
  data() {
    return {
      MyClosureComponent
    };
  }
};
</script>

Features

🔌 Plug-and-play integration
🖥️ Server-side rendering
💧 Progressive hydration
⚡️ Client-side fallback
🔄 Automatic cleanup
📦 TypeScript support

API Reference

`closureNextPlugin`

Nuxt.js plugin that provides Closure Next functionality.

`ClosureComponent`

Vue component for rendering Closure components.

Props

component: Closure component class
props: Component props
ssr: Enable SSR for this instance (default: true)

`$closureNext`

Injected plugin instance with utility methods:

renderComponent(ComponentClass, props?): Server-side renderer
hydrateComponent(ComponentClass, element, props?): Client-side hydration

TypeScript Support

import type { Component } from '@closure-next/core';
import { ClosureComponent } from '@closure-next/nuxt';

interface MyComponentProps {
  title: string;
}

class MyComponent extends Component {
  // Implementation
}

export default {
  components: {
    ClosureComponent
  },
  data() {
    return {
      component: MyComponent,
      props: {
        title: 'Hello' // Type-checked
      }
    };
  }
};

Server-Side Rendering

Custom Layout

<!-- layouts/default.vue -->
<template>
  <div>
    <nuxt />
  </div>
</template>

Custom Error Page

<!-- layouts/error.vue -->
<template>
  <div>
    <closure-component
      :component="ErrorComponent"
      :props="{ error }"
    />
  </div>
</template>

Hydration Strategies

Client-only

<closure-component
  :component="MyComponent"
  :ssr="false"
/>

Server-first

<closure-component
  :component="MyComponent"
  :ssr="true"
/>

Progressive

// nuxt.config.ts
export default {
  plugins: [
    ['@closure-next/nuxt', { hydration: 'progressive' }]
  ]
};

Development Mode

// nuxt.config.ts
export default {
  build: {
    extend(config) {
      // Add Closure Next support
      config.resolve.alias['@closure-next'] = '~/node_modules/@closure-next';
    }
  }
};