Compare commits

...

2 Commits

Author SHA1 Message Date
67454359a8
fixing scroll watcher 2024-10-10 19:37:05 +01:00
15515569ca
adding scroll animation 2024-10-10 19:20:55 +01:00
18 changed files with 3279 additions and 2 deletions

View File

@ -1,6 +1,6 @@
# Js Playground # Frontend Playground
Test bed for testing Javascript stuff. Test bed for testing Javascript + CSS stuff.
* Typescript stuff * Typescript stuff
* Vue * Vue

24
scroll-animation/.gitignore vendored Normal file
View File

@ -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?

View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Animation</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

2893
scroll-animation/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,21 @@
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.10"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"typescript": "^5.5.3",
"vite": "^5.4.8",
"vite-plugin-vue-devtools": "^7.4.6",
"vue-tsc": "^2.1.6"
}
}

View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import Article from './components/Article.vue'
import ScrollWatcher from './components/ScrollWatcher.vue'
</script>
<template>
<ScrollWatcher/>
<Article msg="Scroll Animation" />
</template>
<style scoped>
</style>

View File

@ -0,0 +1,90 @@
<script setup lang="ts">
import { ref } from 'vue'
import ReactiveImage from './ReactiveImage.vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<div class="con">
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
<ReactiveImage/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
<ReactiveImage/>
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
<ReactiveImage/>
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend odio eget nulla elementum posuere. Suspendisse porta metus sit amet quam blandit consequat. Proin semper facilisis nisi, a sollicitudin erat volutpat quis. Sed eget arcu in eros mattis mattis. Aliquam rhoncus pellentesque ante, vel rhoncus est egestas sodales. Aenean ut ipsum maximus, finibus nibh congue, gravida ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. In dui justo, pharetra id risus et, pretium fermentum elit. Phasellus sodales ac velit egestas tincidunt.</p>
<p>Aenean volutpat convallis est tristique pulvinar. Fusce molestie at nibh eget dictum. Duis at rutrum nibh. Proin elementum, lacus in tempor aliquet, felis ex dignissim purus, viverra dictum arcu nulla ac nisi. Nunc eget est in augue vehicula elementum. Etiam laoreet gravida scelerisque. Sed eget mauris libero. Aenean blandit elit id est commodo volutpat. Duis placerat eget lacus id elementum. Sed imperdiet, ante a placerat pulvinar, sem risus scelerisque libero, at venenatis metus mauris tristique velit. Maecenas vel pharetra dolor.</p>
<p>Aenean ultrices metus lectus, eu ultrices arcu tincidunt eu. In porta ex justo, eu viverra mauris accumsan ac. Suspendisse rutrum, orci dapibus facilisis venenatis, sem lacus vehicula turpis, et tincidunt lectus nisi et odio. Integer condimentum, leo et ultrices porttitor, leo odio maximus nibh, sed sagittis magna enim id nibh. Vivamus aliquam, est nec ultrices rutrum, augue justo hendrerit metus, et auctor ex tortor quis nisl. Aenean sit amet sapien eu magna auctor fermentum. Sed tristique turpis ac ante maximus, vitae maximus velit rutrum. Maecenas facilisis neque ut magna accumsan, a iaculis enim condimentum.</p>
<p>Vestibulum leo nunc, maximus quis sodales eu, accumsan sed dui. Sed at justo eu purus euismod consectetur aliquet ut purus. Nam accumsan odio vel sem posuere porttitor. Pellentesque sed lectus libero. Etiam sed magna a sapien iaculis maximus sit amet ut quam. Maecenas at nunc quis massa ornare tincidunt. Praesent pulvinar ante at est egestas, non tristique dolor auctor. In malesuada elit ut gravida lacinia. Nulla rhoncus, eros quis porta volutpat, orci nulla aliquet dolor, nec finibus nunc ligula quis diam. In fringilla ut erat vitae efficitur. Suspendisse risus diam, sodales in augue ultricies, imperdiet volutpat nulla. Sed ut commodo elit, id mattis urna. Integer commodo volutpat placerat.</p>
<p>Curabitur ut malesuada sem, ac porttitor metus. Donec iaculis pharetra odio in faucibus. Pellentesque mattis sagittis ligula, a interdum velit aliquam eu. Praesent sed leo lacinia, sollicitudin eros a, convallis risus. Quisque vel semper ex, eu semper dui. Proin sodales eget erat et convallis. Etiam facilisis velit sit amet molestie rhoncus. Cras sem dui, bibendum a malesuada id, luctus vel lectus. Etiam elit enim, egestas eget erat eu, eleifend rhoncus justo. Phasellus eu euismod libero. Praesent porta vitae sem at sollicitudin.</p>
</div>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
.con {
padding: 2rem;
max-width: 1280px;
margin: 0 auto;
}
</style>

View File

@ -0,0 +1,38 @@
<script setup lang="ts">
</script>
<template>
<img src="https://placehold.co/600x400?text=Hello+World" class="swell"/>
</template>
<style scoped>
@supports (animation-timeline: view()) {
@media screen and (prefers-reduced-motion: no-preference) {
.swell {
animation-name: swell;
animation-fill-mode: forwards;
animation-timeline: view();
animation-timing-function: ease-out;
}
@keyframes swell {
50% {
transform: scale(1.1) rotate(-10deg) skewY(-10deg);
}
to {
transform: scale(1.2) rotate(10deg) skewY(10deg);
filter: drop-shadow(0 0 2em);
}
}
}
}
</style>

View File

@ -0,0 +1,38 @@
<script setup lang="ts">
</script>
<template>
<div class="scroll-watcher"/>
</template>
<style scoped>
@supports (animation-timeline: view()) {
@media screen and (prefers-reduced-motion: no-preference) {
.scroll-watcher {
height: 10px;
position: fixed;
top: 0;
z-index: 1000;
background-color: lime;
width: 100%;
scale: 0 1;
transform-origin: left;
animation: scroll-watcher linear;
animation-timeline: scroll();
}
@keyframes scroll-watcher {
to {
scale: 1 1;
}
}
}
}
</style>

View File

@ -0,0 +1,5 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')

View File

@ -0,0 +1,78 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
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;
}
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 {
/* padding: 2rem; */
text-align: center;
width: 100%;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

1
scroll-animation/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

View File

@ -0,0 +1 @@
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/app.vue","./src/components/article.vue","./src/components/reactiveimage.vue"],"version":"5.6.3"}

View File

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

View File

@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}

View File

@ -0,0 +1 @@
{"root":["./vite.config.ts"],"version":"5.6.3"}

View File

@ -0,0 +1,8 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueDevTools()],
})