https://github.com/grabarzundpartner/nuxt-custom-elements-example
Examples for Nuxt Custom-Elements.
https://github.com/grabarzundpartner/nuxt-custom-elements-example
custom-element nuxtjs vue-custom-element
Last synced: about 1 year ago
JSON representation
Examples for Nuxt Custom-Elements.
- Host: GitHub
- URL: https://github.com/grabarzundpartner/nuxt-custom-elements-example
- Owner: GrabarzUndPartner
- Created: 2021-03-15T19:34:26.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T13:14:28.000Z (about 2 years ago)
- Last Synced: 2024-04-14T07:43:37.324Z (about 2 years ago)
- Topics: custom-element, nuxtjs, vue-custom-element
- Language: Shell
- Homepage: https://nuxt-custom-elements.grabarzundpartner.dev/
- Size: 11.6 MB
- Stars: 6
- Watchers: 3
- Forks: 3
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Nuxt Custom-Elements Example
This is an example project for using [Nuxt Custom-Elements](https://github.com/GrabarzUndPartner/nuxt-custom-elements) with [Nuxt.js](https://nuxtjs.org) and plugins ([VueI18n](https://kazupon.github.io/vue-i18n/), [Vuetify](https://vuetifyjs.com/), ...).
For more information, see the [Usage section](https://nuxt-custom-elements.grabarzundpartner.dev/usage/) in the documentation.
- [👁 **Preview**](https://grabarzundpartner.github.io/nuxt-custom-elements-example/)
- [📖 **Documentation**](http://nuxt-custom-elements.grabarzundpartner.dev/)
## Usage
First of all, the repository must be cloned and install dependencies with
```bash
$ npm install
```
Each example can be started in `dev`, `server` and `ssr`.
For this the path to the example must be given as argument (e.g. `npm run dev -- examples/default`).
The path specification must be specified in `dev`, `build`, `generate` and `start`.
**Available examples:**
| Path | |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `examples/tailwind-css` | [Preview](https://grabarzundpartner.github.io/nuxt-custom-elements-example/tailwind-css/) - [Source](https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/tree/main/examples/tailwind-css) |
| `examples/vue-i18n` | [Preview](https://grabarzundpartner.github.io/nuxt-custom-elements-example/vue-i18n/) - [Source](https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/tree/main/examples/vue-i18n) |
| `examples/vue-router` | [Preview](https://grabarzundpartner.github.io/nuxt-custom-elements-example/vue-router/) - [Source](https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/tree/main/examples/vue-router) |
| `examples/vuetify` | [Preview](https://grabarzundpartner.github.io/nuxt-custom-elements-example/vuetify/) - [Source](https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/tree/main/examples#:~:text=last%20month-,vuetify,-fix(update)%3A%20update) |
| `examples/vuex` | [Preview](https://grabarzundpartner.github.io/nuxt-custom-elements-example/vuex/) - [Source](https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/tree/main/examples/vuex) |
| `examples/external` | [Preview](https://grabarzundpartner.github.io/nuxt-custom-elements-example/external/) - [Source](https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/tree/main/examples/external) |
### Development
```
$ npm run dev -- examples/default
```
### Server
```
$ npm run build -- examples/default && npm run start -- examples/default
```
### Static
```
$ npm run generate -- examples/default --target static && npm run start -- examples/default --target static
```
Finally, the example can be opened in the browser via [http://localhost:3000/]( http://localhost:3000/).
---
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org) and [Nuxt Custom-Elements docs](https://github.com/GrabarzUndPartner/nuxt-custom-elements).