https://github.com/wajeht/embeddable-vue-component
Embeddable widget using Vue components.
https://github.com/wajeht/embeddable-vue-component
Last synced: 2 months ago
JSON representation
Embeddable widget using Vue components.
- Host: GitHub
- URL: https://github.com/wajeht/embeddable-vue-component
- Owner: wajeht
- License: mit
- Created: 2024-05-01T16:01:44.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T22:31:07.000Z (7 months ago)
- Last Synced: 2025-02-15T08:55:59.084Z (2 months ago)
- Language: JavaScript
- Homepage: https://embeddable-vue-component.jaw.dev/
- Size: 84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 😀 Embeddable Vue Component
Embeddable widget using Vue components.
# 📕 Code Structure
```
├── /node_modules
├── /dist # compiled vue code goes here
├── /public # serving public files from express
├── /server # express
├── /widget # vue
├── .env.example
├── .gitignore
├── index.html
└── README.md
```
Vite offers a library compilation mode that allows us to compile a set of Vue components, including assets and CSS, into a single JavaScript file.
We are using Vue to create a custom Web Component and compile it into a single JavaScript bundle.
```html
```
This can be further extended by writing embeddable JavaScript on the fly, eliminating the need to create multiple separate files.
```javascript
app.get('/feedback/:slug/widget.js', async (req, res, next) => {
// ...
const slug = req.params.slug;
// ...
if (req.query.embed === 'true') {
const widget = path.resolve(path.join(process.cwd(), 'dist', 'widget.umd.js'));
return res
.status(200)
.set('Content-Type', 'application/javascript')
.set('Cache-Control', 'public, max-age=86400') // 24 hours
.sendFile(widget);
}
const javascript = `
(function() {
const feedbackWidget = document.createElement('feedback-widget');
feedbackWidget.setAttribute('slug', "${slug}");
document.body.appendChild(feedbackWidget);
const script = document.createElement('script');
script.src = '/feedback/${slug}/widget.js?embed=true';
document.body.appendChild(script);
})();
`;
return res
.set('Content-Type', 'application/javascript')
.set('Cache-Control', 'public, max-age=86400') // 24 hours
.send(javascript);
});
```
Now, we can just use a single file as embeddable widget.
```javascript
```
Visit the following url for a demo.
```
https://codepen.io/entiresolutionprepare/pen/PogMOGj
```
# 💻 Development
Clone the repository
```bash
$ git clone https://github.com/wajeht/embeddable-vue-component.git
```
Copy `.env.example` to `.env`
```bash
$ cp .env.example .env
```
Install dependencies
```bash
$ npm install
```
Run development server
```bash
$ npm run dev:build:watch
```
Look into `npm` scripts inside `package.json` for more information
# © License
Distributed under the MIT License © wajeht. See [LICENSE](./LICENSE) for more information.