https://github.com/GrabarzUndPartner/nuxt-custom-elements

Publish your components as a custom-element standalone build.
https://github.com/GrabarzUndPartner/nuxt-custom-elements

custom-element nuxt-module nuxtjs shadow-dom vue-custom-element vuejs

Last synced: 7 days ago
JSON representation

Publish your components as a custom-element standalone build.

• Host: GitHub
• URL: https://github.com/GrabarzUndPartner/nuxt-custom-elements
• Owner: GrabarzUndPartner
• License: mit
• Created: 2020-01-26T18:52:02.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T18:12:59.000Z (10 days ago)
• Last Synced: 2024-10-29T20:18:41.655Z (10 days ago)
• Topics: custom-element, nuxt-module, nuxtjs, shadow-dom, vue-custom-element, vuejs
• Language: JavaScript
• Homepage: https://grabarzundpartner.github.io/nuxt-custom-elements/
• Size: 40.8 MB
• Stars: 80
• Watchers: 6
• Forks: 10
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-web-components - nuxt-custom-elements - Export your project components as custom elements for integration into external pages. (Libraries / Integrations)

README

        


  share me:

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



![nuxt-custom-elements][logo]

# Nuxt Custom-Elements

[![Grabarz & Partner - Module][grabarz-partner-module-src]][grabarz-partner-href] 

[![main][github-workflow-main-src]][github-workflow-main-href]

[![develop][github-workflow-develop-src]][github-workflow-develop-href]

[![Sonarcloud Status][sonarcloud-src]][sonarcloud-href]

[![npm version][npm-version-latest-src]][npm-version-latest-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![Renovate - Status][renovate-status-src]][renovate-status-href]

[![License][license-src]][license-href]

- [✨   **Release Notes**](./CHANGELOG.md)

- [📖   **Documentation**](https://nuxt-custom-elements.grabarzundpartner.dev/)

- [👁   **Preview**](https://grabarzundpartner.github.io/nuxt-custom-elements-example/)

> Publish your Components as a [vue-custom-element](https://github.com/karol-f/vue-custom-element) standalone build.

Nuxt Custom-Elements allows you to export your existing project components as custom elements for integration into external pages.

## Features

- Using modern and client build

- Export components as widgets

- Use the `Shadow DOM` 🥷

- Use [TailwindCSS](https://tailwindcss.com/) and [Vuetify](https://vuetifyjs.com/) for your widgets

  

📖   [Learn more in the documentation](https://nuxt-custom-elements.grabarzundpartner.dev/)

## Browsers support

For cross-browser [compatibility](https://github.com/ungap/custom-elements#compatibility) (IE11+) the `client` build uses the Polyfill [custom-elements](https://github.com/ungap/custom-elements)

> Polyfill not included in the `modern` build, optional include by option `modernPolyfill` ([Learn more](https://nuxt-custom-elements.grabarzundpartner.dev/options/#modernpolyfill)).

## Development

1. Clone this repository

2. Install dependencies using `npm install` or `yarn install`

3. Start development server using `npm run dev` or `yarn dev`

## Preview

1. Clone this repository

2. Install dependencies using `yarn install` or `npm install`

3. Build and start with express `yarn start:build` or `npm run start:build`

4. Open endpoints via `http://127.0.0.1:3000/` in Browser

## License

[MIT License](./LICENSE)

[logo]: https://user-images.githubusercontent.com/8287751/108605028-b8193f00-73b1-11eb-9a80-872ab36e3a69.png "nuxt-custom-elements"

[grabarz-partner-module-src]: 

[grabarz-partner-href]: 

[renovate-status-src]: 

[renovate-status-href]: 

[github-workflow-main-src]: 

[github-workflow-main-href]: 

[github-workflow-develop-src]: 

[github-workflow-develop-href]: 

[dependencies-status-src]: 

[dependencies-status-href]: 

[dependencies-dev-status-src]: 

[dependencies-dev-status-href]: 

[sonarcloud-src]: 

[sonarcloud-href]: 

[license-src]: https://img.shields.io/npm/l/nuxt-custom-elements.svg?style=flat-square

[license-href]: https://npmjs.com/package/nuxt-custom-elements

[npm-version-latest-src]: https://img.shields.io/npm/v/nuxt-custom-elements/latest.svg?

[npm-version-latest-href]: https://npmjs.com/package/nuxt-custom-elements/v/latest

[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-custom-elements.svg?style=flat-square

[npm-downloads-href]: https://npmjs.com/package/nuxt-custom-elements