chore(samples): add vue sample

Resolves #24 by introducing a Vue sample for easy integration of pillarbox as a component, providing a starting point for integrators.
SRGSSR · Mar 21, 2024 · 88d6c6a · 88d6c6a
1 parent f5e2116
commit 88d6c6a
Show file tree

Hide file tree

Showing 13 changed files with 1,477 additions and 0 deletions.
diff --git a/samples/vue/.gitignore b/samples/vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/samples/vue/README.md b/samples/vue/README.md
@@ -0,0 +1,31 @@
+# pillarbox-web vue sample
+
+This project demonstrates the integration og pillarbox with vue. Feel free to explore and
+experiment with this sample via the following playground:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz]
+
+You can also use this project as a template.
+
+## Quick guide
+
+This project uses [Vite][vite] for building and previewing the example. The following commands are
+available:
+
+- Run the server in development mode.
+  ```shell
+  npm run dev
+  ```
+
+- Compile Typescript and build the project.
+  ```shell
+  npm run build
+  ```
+
+- Preview the compiled project:
+  ```shell
+  npm run preview
+  ```
+
+[stackblitz]: https://stackblitz.com/github/srgssr/pillarbox-web-demo/tree/main/samples/vue
+[vite]: https://vitejs.dev/
diff --git a/samples/vue/index.html b/samples/vue/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Pillarbox + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>