https://github.com/hebilicious/vueflare
POC Edge HTML Streaming Vue 3 Framework for Cloudflare Workers
https://github.com/hebilicious/vueflare
Last synced: 11 months ago
JSON representation
POC Edge HTML Streaming Vue 3 Framework for Cloudflare Workers
- Host: GitHub
- URL: https://github.com/hebilicious/vueflare
- Owner: Hebilicious
- License: mit
- Created: 2022-06-13T08:55:12.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-05T02:20:51.000Z (over 2 years ago)
- Last Synced: 2025-02-23T09:29:30.502Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vueflare
## TODO :
- [x] Working POC on miniflare
- [ ] Working deployed POC
- [ ] Add Cloudflare Caching Control
- [ ] Add Hydration islands
- [ ] Add File routing
Opinionated Edge Rendered Vue 3 Micro Framework for Cloudflare Workers to create blazing fast Progressive Web Applications.
- HTML Streaming (Vue PipeToWebstream)
- Cloudflare Workers (Wrangler 2, module syntax)
- Modern Toolchain : Vue 3 + Typescript + Vite
- Isomorphic PWA
- Islands Architecture
- Auto - import, File routing
- Zero Config
## Getting Started
Create a `/islands/Countdown.vue`
This is a client side component.
```vue
const { target } = defineProps<{ target: string }>()
const now = ref(new Date())
let timer
onMounted(() => {
timer = setInterval(() => {
now.value = new Date()
}, 1000)
})
onUnmounted(() => {
clearInterval(timer)
})
watch(target, () => {
if (now.value > target) clearInterval(timer)
})
const secondsLeft = computed(() => Math.floor((target.getTime() - now.value.getTime()) / 1000))
Done !
{{ new Intl.RelativeTimeFormat("en-GB").format(secondsLeft, "seconds") }}
```
Create a dynamic page ...
`/pages/[name].vue`
```vue
const { request, context, params } = useEdge({ swr: 60 }) // Revalidate every 60 seconds
const data = await fetch("https://name-api.com", params.name) // Named parameters comes from vue-router
const realName = await data.json().name || "Evan"
const response = await context.vueflare({ realName })
response.headers.set("X-Custom-Header", "VueFlare")
return response
const { realName } = getEdgeProps() //The props come from context.vueflare() in the edge block
const date = new Date()
date.setHours(date.getHours() + 1)
const target = date.toISOString()
This name {{ realName }} comes from the Edge !
Change Name
```
### Inspiration
- Vitesse (antfu)
- Iles (https://iles.pages.dev/)
- Fresh (lucacasonato)
- Vite plugin SSR (brillout)
- Serverless PWA React Cloudflare Workers https://blog.cloudflare.com/serverless-pwa-react-cloudflare-workers/
- Flarereact
- Nitro (unjs)