nut-project/nut

🌰 A framework born for micro frontends

110

stars

590

commits

HTML

primary language

Sep 10, 2026

updated

nut.js.org
cli
framework
microfrontends
nut
spa

README

nut logo

NUT Project

npm version dependencies node version build status npm downloads license

Features

  • Flexible layout mechanism
  • File-based router system
  • Customizable layouts and themes
  • Builtin markdown support
  • System events
  • Configuration management
  • Convenient hot reload during development
  • Plugin system

layout / theme HMR

hmr.gif

markdown theme HMR

markdown-theme-hmr.gif

System events

system-events.jpg

Route matching

route-match.jpg

Builtin layouts

default

oceansakura
oceansakura

saber

oceansakura
oceansakura

now

now

How to write a layout

...

How to write a plugin

A standard plugin looks like

export default {
  name: 'your-superb-plugin',
  // some special plugin need specify type,but you can ignore this in most cases
  type: 'login',
  apply( ctx = {}, options = {} ) {
    const { api, events } = ctx

    api.expose( 'method_name', () => {} )
    api.expose( 'prop', 'value' )

    events.on( 'system:before-startup', async ctx => {
      await api.axios() // do some request
      await events.pluginEmit( 'some-event', data ) // emit plugin event out
    } )
  }
}

You can expose some methods or props to application, or listen for system events, emit out some event in plugin

Using plugin

nut.config.js

module.exports = {
  plugins: {
    superb: {
      package: 'your-superb-plugin',
      enable: true,
    }
  }
}

superb is the name in current application

Use above plugin for example

// plugin exposed
ctx.use( 'superb', 'method_name' )
ctx.use( 'superb', 'prop' )

// plugin events
ctx.events.on( 'plugin:superb:some-event', async data => {} )

Get started

yarn global add @nut-project/cli
nut # develop locally
nut --prod # build for production

Contributors

nanokind

567 commits

renovate[bot]

22 commits

centmaster

1 commits

nut-project/nut

🌰 A framework born for micro frontends

110

stars

590

commits

HTML

primary language

Sep 10, 2026

updated

nut.js.org
cli
framework
microfrontends
nut
spa

README

nut logo

NUT Project

npm version dependencies node version build status npm downloads license

Features

  • Flexible layout mechanism
  • File-based router system
  • Customizable layouts and themes
  • Builtin markdown support
  • System events
  • Configuration management
  • Convenient hot reload during development
  • Plugin system

layout / theme HMR

hmr.gif

markdown theme HMR

markdown-theme-hmr.gif

System events

system-events.jpg

Route matching

route-match.jpg

Builtin layouts

default

oceansakura
oceansakura

saber

oceansakura
oceansakura

now

now

How to write a layout

...

How to write a plugin

A standard plugin looks like

export default {
  name: 'your-superb-plugin',
  // some special plugin need specify type,but you can ignore this in most cases
  type: 'login',
  apply( ctx = {}, options = {} ) {
    const { api, events } = ctx

    api.expose( 'method_name', () => {} )
    api.expose( 'prop', 'value' )

    events.on( 'system:before-startup', async ctx => {
      await api.axios() // do some request
      await events.pluginEmit( 'some-event', data ) // emit plugin event out
    } )
  }
}

You can expose some methods or props to application, or listen for system events, emit out some event in plugin

Using plugin

nut.config.js

module.exports = {
  plugins: {
    superb: {
      package: 'your-superb-plugin',
      enable: true,
    }
  }
}

superb is the name in current application

Use above plugin for example

// plugin exposed
ctx.use( 'superb', 'method_name' )
ctx.use( 'superb', 'prop' )

// plugin events
ctx.events.on( 'plugin:superb:some-event', async data => {} )

Get started

yarn global add @nut-project/cli
nut # develop locally
nut --prod # build for production

Contributors

nanokind

567 commits

renovate[bot]

22 commits

centmaster

1 commits

Languages

HTML

48.4%

JavaScript

34.1%

CSS

15.7%

Vue

1.5%