vue3-router-tab 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/README.md +7 -0
  3. package/index.html +13 -0
  4. package/package.json +19 -0
  5. package/public/vite.svg +1 -0
  6. package/src/App.vue +30 -0
  7. package/src/assets/vue.svg +1 -0
  8. package/src/components/HelloWorld.vue +40 -0
  9. package/src/main.js +5 -0
  10. package/src/style.css +89 -0
  11. package/vite.config.js +7 -0
package/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3
+ }
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # Vue 3 + Vite
2
+
3
+ This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ ## Recommended IDE Setup
6
+
7
+ - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + Vue</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.js"></script>
12
+ </body>
13
+ </html>
package/package.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "name": "vue3-router-tab",
3
+ "version": "0.0.1",
4
+ "type": "module",
5
+ "scripts": {
6
+ "build": "vite build"
7
+ },
8
+ "dependencies": {
9
+ "vue": "^3.3.4"
10
+ },
11
+ "devDependencies": {
12
+ "@vitejs/plugin-vue": "^4.2.3",
13
+ "vite": "^4.4.5"
14
+ },
15
+ "description": "This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.",
16
+ "main": "vite.config.js",
17
+ "author": "",
18
+ "license": "ISC"
19
+ }
package/public/vite.svg ADDED
@@ -0,0 +1 @@
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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/App.vue ADDED
@@ -0,0 +1,30 @@
1
+ <script setup>
2
+ import HelloWorld from './components/HelloWorld.vue'
3
+ </script>
4
+
5
+ <template>
6
+ <div>
7
+ <a href="https://vitejs.dev" target="_blank">
8
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
9
+ </a>
10
+ <a href="https://vuejs.org/" target="_blank">
11
+ <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
12
+ </a>
13
+ </div>
14
+ <HelloWorld msg="Vite + Vue" />
15
+ </template>
16
+
17
+ <style scoped>
18
+ .logo {
19
+ height: 6em;
20
+ padding: 1.5em;
21
+ will-change: filter;
22
+ transition: filter 300ms;
23
+ }
24
+ .logo:hover {
25
+ filter: drop-shadow(0 0 2em #646cffaa);
26
+ }
27
+ .logo.vue:hover {
28
+ filter: drop-shadow(0 0 2em #42b883aa);
29
+ }
30
+ </style>
package/src/assets/vue.svg ADDED
@@ -0,0 +1 @@
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>
package/src/components/HelloWorld.vue ADDED
@@ -0,0 +1,40 @@
1
+ <script setup>
2
+ import { ref } from 'vue'
3
+
4
+ defineProps({
5
+ msg: String,
6
+ })
7
+
8
+ const count = ref(0)
9
+ </script>
10
+
11
+ <template>
12
+ <h1>{{ msg }}</h1>
13
+
14
+ <div class="card">
15
+ <button type="button" @click="count++">count is {{ count }}</button>
16
+ <p>
17
+ Edit
18
+ <code>components/HelloWorld.vue</code> to test HMR
19
+ </p>
20
+ </div>
21
+
22
+ <p>
23
+ Check out
24
+ <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25
+ >create-vue</a
26
+ >, the official Vue + Vite starter
27
+ </p>
28
+ <p>
29
+ Install
30
+ <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31
+ in your IDE for a better DX
32
+ </p>
33
+ <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34
+ </template>
35
+
36
+ <style scoped>
37
+ .read-the-docs {
38
+ color: #888;
39
+ }
40
+ </style>
package/src/main.js ADDED
@@ -0,0 +1,5 @@
1
+ import { createApp } from 'vue'
2
+ import './style.css'
3
+ import App from './App.vue'
4
+
5
+ createApp(App).mount('#app')
package/src/style.css ADDED
@@ -0,0 +1,89 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ -webkit-text-size-adjust: 100%;
15
+ }
16
+
17
+ a {
18
+ font-weight: 500;
19
+ color: #646cff;
20
+ text-decoration: inherit;
21
+ }
22
+ a:hover {
23
+ color: #535bf2;
24
+ }
25
+
26
+ a {
27
+ font-weight: 500;
28
+ color: #646cff;
29
+ text-decoration: inherit;
30
+ }
31
+ a:hover {
32
+ color: #535bf2;
33
+ }
34
+
35
+ body {
36
+ margin: 0;
37
+ display: flex;
38
+ place-items: center;
39
+ min-width: 320px;
40
+ min-height: 100vh;
41
+ }
42
+
43
+ h1 {
44
+ font-size: 3.2em;
45
+ line-height: 1.1;
46
+ }
47
+
48
+ button {
49
+ border-radius: 8px;
50
+ border: 1px solid transparent;
51
+ padding: 0.6em 1.2em;
52
+ font-size: 1em;
53
+ font-weight: 500;
54
+ font-family: inherit;
55
+ background-color: #1a1a1a;
56
+ cursor: pointer;
57
+ transition: border-color 0.25s;
58
+ }
59
+ button:hover {
60
+ border-color: #646cff;
61
+ }
62
+ button:focus,
63
+ button:focus-visible {
64
+ outline: 4px auto -webkit-focus-ring-color;
65
+ }
66
+
67
+ .card {
68
+ padding: 2em;
69
+ }
70
+
71
+ #app {
72
+ max-width: 1280px;
73
+ margin: 0 auto;
74
+ padding: 2rem;
75
+ text-align: center;
76
+ }
77
+
78
+ @media (prefers-color-scheme: light) {
79
+ :root {
80
+ color: #213547;
81
+ background-color: #ffffff;
82
+ }
83
+ a:hover {
84
+ color: #747bff;
85
+ }
86
+ button {
87
+ background-color: #f9f9f9;
88
+ }
89
+ }
package/vite.config.js ADDED
@@ -0,0 +1,7 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [vue()],
7
+ })