You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If your app uses the [boring stack](https://docs.sailscasts.com/boring-stack) with Shipwright, Pellicule detects `config/shipwright.js` and reads your Rsbuild config from the `build` key. Your `@` and `~` aliases, your Vue plugin, your entire Shipwright config — Pellicule uses all of it.
13
+
14
+
## Setup
15
+
16
+
There is no setup. Pellicule reads your `config/shipwright.js`.
Pellicule reads the `build` key — which is standard Rsbuild config — and uses the Rsbuild adapter to serve your video components with the same aliases and plugins your app uses.
31
+
32
+
## Project Structure
33
+
34
+
Create a `videos/` directory inside `assets/js/`, right next to your pages and components:
35
+
36
+
```
37
+
my-app/
38
+
├── assets/
39
+
│ ├── js/
40
+
│ │ ├── app.js
41
+
│ │ ├── pages/
42
+
│ │ │ └── invoices/
43
+
│ │ │ └── index.vue
44
+
│ │ ├── components/
45
+
│ │ │ ├── InvoiceCard.vue
46
+
│ │ │ └── PriceTag.vue
47
+
│ │ └── videos/ ← your video components
48
+
│ │ ├── InvoiceDemo.vue
49
+
│ │ └── AppIntro.vue
50
+
│ └── css/
51
+
│ └── app.css
52
+
├── config/
53
+
│ └── shipwright.js
54
+
└── package.json
55
+
```
56
+
57
+
This follows the same convention as the rest of your boring stack app. Pages live in `pages/`, components in `components/`, videos in `videos/`.
`InvoiceCard` and `PriceTag` are your real app components — the same ones your users see. The `@` alias resolves because Shipwright already maps it to `assets/js/`. When you update the component in your app, the video updates too.
124
+
125
+
## Using Composables and Layouts
126
+
127
+
Your `assets/js/composables/` are available too:
128
+
129
+
```vue
130
+
<script setup>
131
+
import { useFrame, interpolate } from 'pellicule'
132
+
import { useCurrencyFormatter } from '@/composables/currency'
133
+
134
+
const frame = useFrame()
135
+
const { format } = useCurrencyFormatter('USD')
136
+
137
+
const amount = computed(() => {
138
+
const raw = interpolate(frame.value, [0, 60], [0, 2400])
139
+
return format(Math.round(raw))
140
+
})
141
+
</script>
142
+
143
+
<template>
144
+
<div class="video">
145
+
<span class="counter">{{ amount }}</span>
146
+
</div>
147
+
</template>
148
+
```
149
+
150
+
Your formatting logic, your utility functions, your design tokens — all reusable in videos without duplication.
Copy file name to clipboardExpand all lines: docs/pellicule/cli.md
+62-11Lines changed: 62 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,19 +21,70 @@ npx pellicule Video # Looks for Video.vue
21
21
npx pellicule Video.vue # Same result
22
22
```
23
23
24
+
Pellicule also checks your project's default video directory based on the detected framework. In a boring stack app, `pellicule InvoiceDemo` finds `assets/js/videos/InvoiceDemo.vue`. In a Laravel app, it finds `resources/js/Videos/InvoiceDemo.vue`. See [Integrations](/pellicule/integrations) for details.
|`serverUrl`| string | URL of a running dev server (BYOS mode) |
63
+
|`videosDir`| string | Custom directory for video components (relative path) |
64
+
|`outDir`| string | Directory for rendered video output (relative path) |
65
+
|`bundler`| string | Force `vite` or `rsbuild`|
66
+
67
+
When `outDir` is set and no `-o` flag is passed, the output filename is derived from the component name. For example, `pellicule InvoiceDemo` with `outDir` set to `./renders` writes to `./renders/InvoiceDemo.mp4`.
Most projects never need these — Pellicule auto-detects your project type and config, and the package.json `pellicule` key handles project-wide settings. These CLI flags are escape hatches for one-off overrides.
74
+
75
+
```bash
76
+
# Override the default Nuxt server URL (defaults to localhost:3000)
Copy file name to clipboardExpand all lines: docs/pellicule/getting-started.md
+5Lines changed: 5 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -128,10 +128,15 @@ Create a `Video.vue` file and run:
128
128
npx pellicule Video.vue
129
129
```
130
130
131
+
Pellicule auto-detects your project type and reads your existing config. No extra configuration needed — if you have a `vite.config.js`, `config/shipwright.js`, or `nuxt.config.ts`, Pellicule picks it up automatically. Your aliases and plugins just work.
132
+
133
+
See [Integrations](/pellicule/integrations) for framework-specific guides.
134
+
131
135
## Next Steps
132
136
133
137
Learn the core concepts:
134
138
135
139
-[Frames](/pellicule/frames) — The fundamental unit of video
136
140
-[Video Config](/pellicule/video-config) — Understanding fps, duration, and dimensions
137
141
-[Sequences](/pellicule/sequences) — Organizing videos into scenes
142
+
-[Integrations](/pellicule/integrations) — Using Pellicule with Vite, Nuxt, Laravel, The Boring Stack, and Quasar
Pellicule supports adding audio tracks to your videos via the `--audio` CLI flag or the `audio` property in `defineVideoConfig`. See the [CLI reference](/pellicule/cli) for details.
0 commit comments