MinzeInstallation
Minze can be installed in several different ways.
npm
Installing from npm:
bash
$ npm add minze$ npm add minzebash
$ yarn add minze$ yarn add minzebash
$ pnpm add minze$ pnpm add minzejs
import { MinzeElement } from 'minze'
class MyElement extends MinzeElement {
html = () => 'Hello Minze!'
}
MyElement.define()import { MinzeElement } from 'minze'
class MyElement extends MinzeElement {
html = () => 'Hello Minze!'
}
MyElement.define()html
<my-element></my-element><my-element></my-element>CLI
Installing via command line:
Minze requires Node.js version >=
16.0.0
bash
$ npm create minze@latest$ npm create minze@latestbash
$ yarn create minze$ yarn create minzebash
$ pnpm create minze$ pnpm create minzeThen follow the prompts!
Command line options
You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite environment, run:
bash
$ npm create minze@latest my-project -- --template vite$ npm create minze@latest my-project -- --template vitebash
$ yarn create minze my-project --template vite$ yarn create minze my-project --template vitebash
$ pnpm create minze my-project -- --template vite$ pnpm create minze my-project -- --template viteCurrently supported template presets include:
vitevite-tsstorybookstorybook-ts
You can use . for the project name to scaffold in the current directory.
CDN
Loading Minze via a CDN link from esm.sh, unpkg or jsdelivr. Pick one of the following:
esm.sh
https://esm.sh/minzefor latest versionhttps://esm.sh/[email protected]pin to specific version
unpkg
https://unpkg.com/minzefor latest versionhttps://unpkg.com/[email protected]pin to specific version
jsdelivr
https://esm.run/minzefor latest versionhttps://esm.run/[email protected]pin to specific version
WARNING
In production, always pin your imports to a specific version to prevent your application from breaking unexpectedly during a future update.
html
<html>
<head></head>
<body>
<!-- custom element -->
<my-element></my-element>
<!-- js code -->
<script type="module">
import { MinzeElement } from 'https://esm.sh/minze'
;(class MyElement extends MinzeElement {
html = () => 'Hello Minze!'
}).define()
</script>
</body>
</html><html>
<head></head>
<body>
<!-- custom element -->
<my-element></my-element>
<!-- js code -->
<script type="module">
import { MinzeElement } from 'https://esm.sh/minze'
;(class MyElement extends MinzeElement {
html = () => 'Hello Minze!'
}).define()
</script>
</body>
</html>html
<html>
<head></head>
<body>
<!-- custom elements -->
<first-element></first-element>
<second-element></second-element>
<!-- js code -->
<script type="module">
import { Minze, MinzeElement } from 'https://esm.sh/minze'
class FirstElement extends MinzeElement {
html = () => 'Hello Minze!'
}
class SecondElement extends MinzeElement {
html = () => 'Hello Minze again!'
}
Minze.defineAll([FirstElement, SecondElement])
</script>
</body>
</html><html>
<head></head>
<body>
<!-- custom elements -->
<first-element></first-element>
<second-element></second-element>
<!-- js code -->
<script type="module">
import { Minze, MinzeElement } from 'https://esm.sh/minze'
class FirstElement extends MinzeElement {
html = () => 'Hello Minze!'
}
class SecondElement extends MinzeElement {
html = () => 'Hello Minze again!'
}
Minze.defineAll([FirstElement, SecondElement])
</script>
</body>
</html>