Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nut-project/nut
🌰 A framework born for micro frontends
https://github.com/nut-project/nut
cli framework microfrontends nut spa
Last synced: about 1 month ago
JSON representation
🌰 A framework born for micro frontends
- Host: GitHub
- URL: https://github.com/nut-project/nut
- Owner: nut-project
- License: mit
- Created: 2019-03-19T08:30:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:45:59.000Z (2 months ago)
- Last Synced: 2024-05-08T20:55:05.321Z (about 2 months ago)
- Topics: cli, framework, microfrontends, nut, spa
- Language: HTML
- Homepage: https://nut.js.org
- Size: 5.71 MB
- Stars: 108
- Watchers: 4
- Forks: 7
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-micro-frontends - NUT
- awesome-microfrontends - NUT - A framework born for micro frontends, which is used internally in Netease, currently it supports Vue, React and more (Tooling / Frameworks)
- awesome-micro-frontends - NUT
- awesome-micro-frontends - nut
- awesome-stars - nut-project/nut - 🌰 A framework born for micro frontends (framework)
README
NUT Project
## 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
## markdown theme HMR
## System events
## Route matching
## Builtin layouts
#### default
| ocean | sakura |
| :---: | :---: |
|  |  |
#### saber
| ocean | sakura |
| :---: | :---: |
|  |  |
#### now
### How to write a layout
...
### How to write a plugin
A standard plugin looks like
```js
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
```js
module.exports = {
plugins: {
superb: {
package: 'your-superb-plugin',
enable: true,
}
}
}
```
superb is the name in current application
Use above plugin for example
```js
// plugin exposed
ctx.use( 'superb', 'method_name' )
ctx.use( 'superb', 'prop' )
// plugin events
ctx.events.on( 'plugin:superb:some-event', async data => {} )
```
## Get started
```bash
yarn global add @nut-project/cli
```
```bash
nut # develop locally
nut --prod # build for production
```