aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src
diff options
context:
space:
mode:
Diffstat (limited to 'src-vue/src')
-rw-r--r--src-vue/src/App.vue31
-rw-r--r--src-vue/src/assets/vue.svg1
-rw-r--r--src-vue/src/components/HelloWorld.vue38
-rw-r--r--src-vue/src/main.ts5
-rw-r--r--src-vue/src/style.css81
-rw-r--r--src-vue/src/vite-env.d.ts7
6 files changed, 163 insertions, 0 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
new file mode 100644
index 00000000..76ebf086
--- /dev/null
+++ b/src-vue/src/App.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+ <div>
+ <a href="https://vitejs.dev" target="_blank">
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
+ </a>
+ <a href="https://vuejs.org/" target="_blank">
+ <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+ </a>
+ </div>
+ <HelloWorld msg="Vite + Vue" />
+</template>
+
+<style scoped>
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+ filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
diff --git a/src-vue/src/assets/vue.svg b/src-vue/src/assets/vue.svg
new file mode 100644
index 00000000..770e9d33
--- /dev/null
+++ b/src-vue/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg> \ No newline at end of file
diff --git a/src-vue/src/components/HelloWorld.vue b/src-vue/src/components/HelloWorld.vue
new file mode 100644
index 00000000..52309103
--- /dev/null
+++ b/src-vue/src/components/HelloWorld.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+ <h1>{{ msg }}</h1>
+
+ <div class="card">
+ <button type="button" @click="count++">count is {{ count }}</button>
+ <p>
+ Edit
+ <code>components/HelloWorld.vue</code> to test HMR
+ </p>
+ </div>
+
+ <p>
+ Check out
+ <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+ >create-vue</a
+ >, the official Vue + Vite starter
+ </p>
+ <p>
+ Install
+ <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+ in your IDE for a better DX
+ </p>
+ <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+ color: #888;
+}
+</style>
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
new file mode 100644
index 00000000..2425c0f7
--- /dev/null
+++ b/src-vue/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
new file mode 100644
index 00000000..0192f9aa
--- /dev/null
+++ b/src-vue/src/style.css
@@ -0,0 +1,81 @@
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/src-vue/src/vite-env.d.ts b/src-vue/src/vite-env.d.ts
new file mode 100644
index 00000000..323c78a6
--- /dev/null
+++ b/src-vue/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}