https://github.com/hasanabbadi/vue-cdn-template
A template with support for components when using Vue via CDN
https://github.com/hasanabbadi/vue-cdn-template
cdn template vue vue3
Last synced: 3 months ago
JSON representation
A template with support for components when using Vue via CDN
- Host: GitHub
- URL: https://github.com/hasanabbadi/vue-cdn-template
- Owner: HasanAbbadi
- License: mit
- Created: 2025-02-23T18:51:49.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-24T12:57:24.000Z (4 months ago)
- Last Synced: 2025-03-07T21:48:41.405Z (3 months ago)
- Topics: cdn, template, vue, vue3
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue CDN Components Template
### Why does this exist?
- Vue cdn doesn't support components, this is a temporary bandaid.
- Useful for quick prototypes / messing around
- No build step, no tooling to waste your time and storage
### Example
```html
Hello {{ name }}!
Count is: {{ count }}
export default {
props: ["name"],
data: () => ({ count: 0 }),
};
```
```js
// index.html
// ...
import VueCDNParser from "./parser.js";
const parser = new VueCDNParser();
// ...
await parser.use("/src/components/counter.html");
// ...
```
## Quick Start
Clone the template and modify it to your liking:
```bash
git clone https://github.com/HasanAbbadi/vue-cdn-template
python -m http.server # or: npx http-server
```
or add the script to your import map and use it yourself:
```html
{
"imports": {
// this shouldn't be used in production,
// but it's fine since this is a prototyping tool
"parser": "https://cdn.jsdelivr.net/gh/HasanAbbadi/vue-cdn-template/parser.min.js"
}
}
```
## Limitations
Being a hacky solution, it has some limitations (for now):
- No imports in components (other than nested components)
- No self-closing tags
- ~~Scoped styles apply to nested components~~ (fixed)
- ~~No nested components~~ (fixed using imports)
- ~~No scoped styles~~ (fixed)
- ~~No slots~~ (already existed :P)
## Default Project Structure
```
├── index.html # Your app entry
├── src/
│ ├── components/*.html # Components live here
│ └── css/ # Your styles
└── parser.js # What makes it work
```
## Contributing
Got ideas? PRs are appreciated.
## License
MIT