Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace unpkg with jsdelivr for reliability #247

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Replace unpkg with jsdelivr for reliability #247

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0bdf722
Replace unpkg with jsdelivr for reliability
hykilpikonna Mar 15, 2025
512e60c
Fix module url
hykilpikonna Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
`petite-vue` can be used without a build step. Simply load it from a CDN:

```html
<script src="https://unpkg.com/petite-vue" defer init></script>
<script src="https://cdn.jsdelivr.net/npm/petite-vue" defer init></script>

<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
Expand All @@ -38,7 +38,7 @@
If you don't want the auto init, remove the `init` attribute and move the scripts to end of `<body>`:

```html
<script src="https://unpkg.com/petite-vue"></script>
<script src="https://cdn.jsdelivr.net/npm/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>
Expand All @@ -48,7 +48,7 @@ Or, use the ES module build:

```html
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
import { createApp } from 'https://esm.run/petite-vue'
createApp().mount()
</script>
```
Expand All @@ -57,9 +57,9 @@ Or, use the ES module build:

The short CDN URL is meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:

- Global build: `https://unpkg.com/[email protected]/dist/petite-vue.iife.js`
- Global build: `https://cdn.jsdelivr.net/npm/[email protected]/dist/petite-vue.iife.js`
- exposes `PetiteVue` global, supports auto init
- ESM build: `https://unpkg.com/[email protected]/dist/petite-vue.es.js`
- ESM build: `https://cdn.jsdelivr.net/npm/[email protected]/dist/petite-vue.es.js`
- Must be used with `<script type="module">`

### Root Scope
Expand All @@ -68,7 +68,7 @@ The `createApp` function accepts a data object that serves as the root scope for

```html
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
import { createApp } from 'https://esm.run/petite-vue'

createApp({
// exposed to all expressions
Expand Down Expand Up @@ -153,7 +153,7 @@ First, reusable scope logic can be created with functions:

```html
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
import { createApp } from 'https://esm.run/petite-vue'

function Counter(props) {
return {
Expand Down Expand Up @@ -189,7 +189,7 @@ If you also want to reuse a piece of template, you can provide a special `$templ

```html
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
import { createApp } from 'https://esm.run/petite-vue'

function Counter(props) {
return {
Expand Down Expand Up @@ -224,7 +224,7 @@ You can use the `reactive` method (re-exported from `@vue/reactivity`) to create

```html
<script type="module">
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
import { createApp, reactive } from 'https://esm.run/petite-vue'

const store = reactive({
count: 0,
Expand Down