https://github.com/bkwld/vue-embed
Parse html from the CMS for use with statically generated sites
https://github.com/bkwld/vue-embed
Last synced: over 1 year ago
JSON representation
Parse html from the CMS for use with statically generated sites
- Host: GitHub
- URL: https://github.com/bkwld/vue-embed
- Owner: BKWLD
- License: mit
- Created: 2021-10-12T23:56:37.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-09-20T23:15:01.000Z (almost 3 years ago)
- Last Synced: 2025-03-30T11:02:01.183Z (over 1 year ago)
- Language: JavaScript
- Size: 337 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Embed
A component that takes a plain text field with script tags and script links and parses
## Props
- `html`: The markup coming from the CMS
- `showLoading`: When true, shows "Loading" on the front end while the external scripts are loading.
## Usage
```javascript
import Embed from '@bkwld/vue-embed'
Vue.component 'embed', Embed
```
```pug
vue-embed(:html='your_html_here')
```
## Why use vue-embed?
`vue-embed` solves the problem of `script` tags not executing on client-rendered pages. Often these same `script` tags execute normally when the page is loaded via SSG. A common scenario for this is a CMS with an Embed Block that renders `script` tags to the front end, such as embedded videos or publisher tags.
## How does vue-embed work?
- On SSG and SSR, `vue-embed` renders the provided HTML code with the `script` tags removed.
- On `mounted`, `vue-embed` finds all `script` tags with external URLs and appends them to the document head with `async="true"`
- On `mounted`, `vue-embed` finds all `script` tags with inline code and executes them using `eval()`.