Skip to content

Commit ae9cf8c

Browse files
ElectronicBlueberryElectronicBlueberry
authored
Add client-vue example (#7)
* add client-vue example * remove package-lock from vue client * add vue client package-lock to gitignore
1 parent 5d7b4c2 commit ae9cf8c

File tree

15 files changed

+238
-0
lines changed

15 files changed

+238
-0
lines changed

‎client-vue/.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎client-vue/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
package-lock.json
2+
3+
# Logs
4+
logs
5+
*.log
6+
npm-debug.log*
7+
yarn-debug.log*
8+
yarn-error.log*
9+
pnpm-debug.log*
10+
lerna-debug.log*
11+
12+
node_modules
13+
.DS_Store
14+
dist
15+
dist-ssr
16+
coverage
17+
*.local
18+
19+
# Editor directories and files
20+
.vscode/*
21+
!.vscode/extensions.json
22+
.idea
23+
*.suo
24+
*.ntvs*
25+
*.njsproj
26+
*.sln
27+
*.sw?
28+
29+
*.tsbuildinfo
30+
31+
.eslintcache
32+
33+
# Cypress
34+
/cypress/videos/
35+
/cypress/screenshots/
36+
37+
# Vitest
38+
__screenshots__/

‎client-vue/.prettierrc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://json.schemastore.org/prettierrc",
3+
"semi": true,
4+
"singleQuote": true,
5+
"printWidth": 100
6+
}

‎client-vue/.vscode/extensions.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"recommendations": [
3+
"Vue.volar",
4+
"esbenp.prettier-vscode"
5+
]
6+
}

‎client-vue/README.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# client-vue
2+
3+
This template should help get you started developing with Vue 3 in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
8+
9+
## Recommended Browser Setup
10+
11+
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
12+
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
13+
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
14+
- Firefox:
15+
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
16+
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
17+
18+
## Type Support for `.vue` Imports in TS
19+
20+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
21+
22+
## Customize configuration
23+
24+
See [Vite Configuration Reference](https://vite.dev/config/).
25+
26+
## Project Setup
27+
28+
```sh
29+
npm install
30+
```
31+
32+
### Compile and Hot-Reload for Development
33+
34+
```sh
35+
npm run dev
36+
```
37+
38+
### Type-Check, Compile and Minify for Production
39+
40+
```sh
41+
npm run build
42+
```

‎client-vue/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎client-vue/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
<script type="module" src="https://embed.embeddable.com/js/v1/?region=EU"></script>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
</html>

‎client-vue/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "client-vue",
3+
"version": "0.0.0",
4+
"private": true,
5+
"proxy": "http://localhost:3001",
6+
"type": "module",
7+
"engines": {
8+
"node": "^20.19.0 || >=22.12.0"
9+
},
10+
"scripts": {
11+
"dev": "vite",
12+
"build": "run-p type-check \"build-only {@}\" --",
13+
"preview": "vite preview",
14+
"build-only": "vite build",
15+
"type-check": "vue-tsc --build",
16+
"format": "prettier --write src/"
17+
},
18+
"dependencies": {
19+
"vue": "^3.5.22"
20+
},
21+
"devDependencies": {
22+
"@tsconfig/node22": "^22.0.2",
23+
"@types/node": "^22.18.11",
24+
"@vitejs/plugin-vue": "^6.0.1",
25+
"@vue/tsconfig": "^0.8.1",
26+
"npm-run-all2": "^8.0.4",
27+
"prettier": "3.6.2",
28+
"typescript": "~5.9.0",
29+
"vite": "^7.1.11",
30+
"vite-plugin-vue-devtools": "^8.0.3",
31+
"vue-tsc": "^3.1.1"
32+
}
33+
}

‎client-vue/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎client-vue/src/App.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue';
3+
4+
const token = ref('');
5+
const embedID = '<id of the embeddable you want to embed>';
6+
7+
async function fetchToken() {
8+
const response = await fetch('/token?embeddableId=' + embedID);
9+
const data: { token: string } = await response.json();
10+
token.value = data.token;
11+
}
12+
13+
fetchToken();
14+
</script>
15+
16+
<template>
17+
<em-beddable v-if="token" :token="token"></em-beddable>
18+
</template>
19+
20+
<style scoped></style>

0 commit comments

Comments
 (0)