Install SwiftWC with Vite
How to install dependencies and structure your Vite app.
1. Create your project
bash
npm create vite@latest my-project
cd my-projectbash
bun add --exact @swiftwc/ui@latest --dev
cd my-project2. Install SwiftWC
Install SwiftWC and it's dependencies:
bash
npm i -D @swiftwc/ui@latest @phosphor-icons/web inter-ui typescriptbash
bun add --exact @swiftwc/ui@latest --dev3. Import the stylesheet
Add an @import to your CSS file for SwiftWC:
css
@import '@swiftwc/ui/css';4. Import the Client module
Add an import to your JavaScript file that imports SwiftWC client module:
ts
import '@swiftwc/ui/client'5. Start your build process
bash
npm run dev6. Start using SwiftWC
html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/app.css" rel="stylesheet" />
<script type="module" src="/app.ts"></script>
</head>
<body>
<v-keyboard system-font="Inter"></v-keyboard>
<navigation-stack>
<scroll-view>
<v-stack>
<button is="borderless-button" type="button">
<label-view title="Hello world" system-image="hand-waving"></label-view>
</button>
</v-stack>
</scroll-view>
</navigation-stack>
</body>
</html>css
@import 'inter-ui/inter.css';
@import '@swiftwc/ui/css';ts
import '@phosphor-icons/web/bold'
import '@phosphor-icons/web/duotone'
import '@phosphor-icons/web/fill'
import '@phosphor-icons/web/light'
import '@phosphor-icons/web/regular'
import '@phosphor-icons/web/thin'
import { alert } from '@swiftwc/ui/client'
document.addEventListener('click', async (evt: Event) => {
if (!(evt.target instanceof HTMLElement)) return
if (!evt.target.closest('button')) return
await self.customElements.whenDefined('borderless-button')
void alert('hello', 'world')
})json
{
"compilerOptions": {
"types": ["vite/client"]
}
}ts
declare module '@phosphor-icons/web/*'