Skip to content

Commit 4d904b7

Browse files
stormwarningstormwarning
authored
Migrate to Vue v3 and Nuxt v4 (#247)
1 parent 645291f commit 4d904b7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+23224
-40725
lines changed

‎.changeset/mighty-spiders-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polychroma': patch
3+
---
4+
5+
Migrate to Vue 3 and Nuxt 4

‎.eslintrc.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
# dependencies
1+
## DEPENDENCIES ######################################################
22
node_modules
33

4-
# logs
5-
npm-debug.log
4+
## LOGS ##############################################################
5+
logs
6+
*.log
67

7-
# Nuxt build
8+
## GENERATED #########################################################
9+
.output
10+
.data
811
.nuxt
9-
10-
# Nuxt generate
12+
.nitro
13+
.cache
1114
dist
1215

13-
# Service worker
14-
sw.*
15-
16-
.vercel
16+
## SECRETS ###########################################################
17+
.env
18+
.env.*
19+
!.env.example
20+
.vercel

assets/css/main.css renamed to app/assets/css/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ code,
4343
margin-right: -0.25em;
4444
}
4545

46-
.nuxt-link-active {
46+
.router-link-active {
4747
border-bottom: 0.125rem solid currentColor;
4848
}
4949

‎app/components/app-footer.vue‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<footer
3+
class="relative z-10 flex items-end px-8 py-8 lg:py-16 overflow-hidden"
4+
:class="$style.footer"
5+
>
6+
<AppMasthead class="hidden lg:block" aria-hidden="true" />
7+
<div class="flex-auto max-w-md lg:mt-8 mx-auto">
8+
<p class="text-xs leading-normal tracking-widest text-right uppercase">
9+
By
10+
<a
11+
class="text-black hover:opacity-75 focus:opacity-75"
12+
href="https://tidaltheory.io/"
13+
>
14+
@stormwarning
15+
</a>
16+
</p>
17+
<div
18+
class="flex justify-end mt-2 text-xs leading-normal uppercase tracking-widest text-right"
19+
>
20+
<a
21+
class="text-black hover:opacity-75 focus:opacity-75 inline-block w-8 h-8 p-2"
22+
href="https://github.com/stormwarning/polychroma"
23+
>
24+
<svg
25+
fill="currentColor"
26+
xmlns="http://www.w3.org/2000/svg"
27+
viewBox="0 0 16 16"
28+
fill-rule="evenodd"
29+
clip-rule="evenodd"
30+
stroke-linejoin="round"
31+
stroke-miterlimit="1.414"
32+
>
33+
<path
34+
d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"
35+
/>
36+
</svg>
37+
</a>
38+
<a
39+
class="text-black hover:opacity-75 focus:opacity-75 inline-block w-8 h-8 p-2 ml-2"
40+
href="https://twitter.com/stormwarning"
41+
>
42+
<svg
43+
fill="currentColor"
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 16 16"
46+
fill-rule="evenodd"
47+
clip-rule="evenodd"
48+
stroke-linejoin="round"
49+
stroke-miterlimit="1.414"
50+
>
51+
<path
52+
d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z"
53+
fill-rule="nonzero"
54+
/>
55+
</svg>
56+
</a>
57+
</div>
58+
</div>
59+
</footer>
60+
</template>
61+
62+
<script setup lang="ts">
63+
// Components are auto-imported in Nuxt 3
64+
</script>
65+
66+
<style lang="postcss" module>
67+
.footer {
68+
grid-area: footer;
69+
70+
@screen lg {
71+
grid-area: sidebar;
72+
}
73+
}
74+
</style>

‎app/components/app-masthead.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<header class="absolute top-0 right-8 z-10 pt-20">
3+
<h1
4+
class="text-2xl sm:text-4xl lg:text-5xl font-bold leading-none uppercase tracking-mega capsize"
5+
>
6+
Polychroma
7+
</h1>
8+
<div class="mt-4">
9+
<span
10+
class="block font-bold text-right text-sm lg:text-base leading-none capsize"
11+
>
12+
v{{ version }}
13+
</span>
14+
</div>
15+
</header>
16+
</template>
17+
18+
<script setup lang="ts">
19+
import { useRuntimeConfig } from '#app'
20+
21+
const runtimeConfig = useRuntimeConfig()
22+
const { version } = runtimeConfig.public
23+
</script>

‎app/components/app-nav-link.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<NuxtLink :to="to" :exact="exact" class="py-2 text-grey-700 no-underline">
3+
<span
4+
class="block text-sm font-semibold leading-4 uppercase tracking-widest capsize"
5+
>
6+
<slot />
7+
</span>
8+
</NuxtLink>
9+
</template>
10+
11+
<script setup lang="ts">
12+
interface Props {
13+
exact?: boolean
14+
to?: string
15+
}
16+
17+
withDefaults(defineProps<Props>(), {
18+
to: '/',
19+
exact: false,
20+
})
21+
</script>

‎app/components/app-nav.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<nav class="p-8">
3+
<div class="flex gap-4 max-w-md mx-auto">
4+
<AppNavLink :exact="true">Controls</AppNavLink>
5+
<AppNavLink to="/info">Info</AppNavLink>
6+
</div>
7+
</nav>
8+
</template>
9+
10+
<script setup lang="ts">
11+
// Components are auto-imported in Nuxt 3
12+
</script>

‎app/components/base-button.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<button
3+
class="relative flex items-center p-2 lg:p-4 text-xs font-medium text-gray-900 leading-none uppercase tracking-widest bg-gray-100 hover:bg-white focus:bg-white border-none rounded-sm outline-none cursor-pointer shadow-a"
4+
>
5+
<slot />
6+
</button>
7+
</template>
8+
9+
<script setup lang="ts">
10+
// In Vue 3, event listeners are automatically inherited
11+
// No need for v-on="$listeners"
12+
</script>

‎app/components/base-input.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<input
3+
:type="type"
4+
:class="$style.input"
5+
:value="modelValue"
6+
@input="
7+
$emit('update:modelValue', ($event.target as HTMLInputElement).value)
8+
"
9+
/>
10+
</template>
11+
12+
<script setup lang="ts">
13+
14+
interface Props {
15+
modelValue?: string | number
16+
type?: string
17+
}
18+
19+
withDefaults(defineProps<Props>(), {
20+
type: 'text',
21+
modelValue: '',
22+
})
23+
24+
defineEmits<{
25+
'update:modelValue': [value: string]
26+
}>()
27+
</script>
28+
29+
<style module>
30+
.input {
31+
display: block;
32+
width: 100%;
33+
padding: 0;
34+
margin: 0;
35+
font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
36+
line-height: 1;
37+
border: 0;
38+
border-radius: 0;
39+
}
40+
</style>

0 commit comments

Comments
 (0)