Skip to content

Commit 3282e1d

Browse files
turukawaturukawa
committed
Integrated PWA and i18n
Integrated the following components: - @nuxtjs/i18n - @vite-pwa/nuxt - @nuxtjs/robots
1 parent c5cd1ba commit 3282e1d

37 files changed

Lines changed: 3589 additions & 535 deletions

‎{{cookiecutter.project_slug}}/frontend/Dockerfile‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
FROM node:18.17.0 AS build
2-
ENV NODE_ENV=development NITRO_HOST=${NUXT_HOST:-0.0.0.0} NITRO_PORT=${NUXT_PORT:-3000} NUXT_TELEMETRY_DISABLED=1
1+
FROM node:18.17 AS build
2+
ENV NODE_ENV=development APP_ENV=development NITRO_HOST=${NUXT_HOST:-0.0.0.0} NITRO_PORT=${NUXT_PORT:-3000} NUXT_TELEMETRY_DISABLED=1
3+
# ENV PATH /frontend/node_modules/.bin:$PATH
34
COPY . /frontend
45
WORKDIR /frontend
56
RUN yarn install --frozen-lockfile --network-timeout 100000 --non-interactive
67
RUN yarn build --standalone
78
EXPOSE ${NUXT_PORT}
89

910
FROM build AS run-dev
10-
ENTRYPOINT ["yarn"]
11-
CMD ["dev"]
11+
# ENTRYPOINT ["yarn"]
12+
CMD ["yarn", "dev"]
1213

1314
FROM build AS run-start
14-
ENV NODE_ENV=production
15+
ENV NODE_ENV=production APP_ENV=production
1516
ENTRYPOINT ["yarn"]
1617
CMD ["start"]
1718

18-
FROM node:18.17.0-alpine AS run-minimal
19+
FROM node:18.17-alpine AS run-minimal
1920
ARG NUXT_VERSION=^3.5.0
2021
ARG NUXT_CONTENT_VERSION=^2.4.3
2122
ARG TAILWINDCSS_VERSION=^3.2.1
@@ -32,19 +33,25 @@ ARG VEE_VERSION=^4.7.3
3233
ARG VEE_INT_VERSION=^4.7.3
3334
ARG VEE_RULES_VERSION=^4.7.3
3435
ARG QR_CODE_VERSION=^3.3.3
35-
ENV NODE_ENV=production NITRO_HOST=${NUXT_HOST:-0.0.0.0} NITRO_PORT=${NUXT_PORT:-3000} NUXT_TELEMETRY_DISABLED=1
36+
ARG I18N_VERSION=^8.0.0-beta.13
37+
ARG NUXT_ROBOTS_VERSION=^3.0.0
38+
ARG VITE_PWA_NUXT_VERSION=^0.1.0
39+
ENV NODE_ENV=production APP_ENV=production NITRO_HOST=${NUXT_HOST:-0.0.0.0} NITRO_PORT=${NUXT_PORT:-3000} NUXT_TELEMETRY_DISABLED=1
3640
WORKDIR /frontend
37-
RUN yarn add nuxt@${NUXT_VERSION} @nuxt/content@${NUXT_CONTENT_VERSION} tailwindcss@${TAILWINDCSS_VERSION} autoprefixer@${AUTOPREFIXER_VERSION} postcss@${POSTCSS_VERSION} @tailwindcss/aspect-ratio@${ASPECT_RATIO_VERSION} @tailwindcss/forms@${FORMS_VERSION} @tailwindcss/typography@${TYPOGRAPHY_VERSION} @headlessui/vue@${HEADLESSUI_VERSION} @heroicons/vue@${HEROICONS_VERSION} @pinia/nuxt@${PINIA_VERSION} @pinia-plugin-persistedstate/nuxt${PINIA_PERSISTED_VERSION} vee-validate@${VEE_VERSION} @vee-validate/i18n${VEE_INT_VERSION} @vee-validate/rules${VEE_RULES_VERSION} qrcode.vue${QR_CODE_VERSION}
41+
RUN yarn add nuxt@${NUXT_VERSION} @nuxt/content@${NUXT_CONTENT_VERSION} tailwindcss@${TAILWINDCSS_VERSION} autoprefixer@${AUTOPREFIXER_VERSION} postcss@${POSTCSS_VERSION} @tailwindcss/aspect-ratio@${ASPECT_RATIO_VERSION} @tailwindcss/forms@${FORMS_VERSION} @tailwindcss/typography@${TYPOGRAPHY_VERSION} @headlessui/vue@${HEADLESSUI_VERSION} @heroicons/vue@${HEROICONS_VERSION} @pinia/nuxt@${PINIA_VERSION} @pinia-plugin-persistedstate/nuxt${PINIA_PERSISTED_VERSION} vee-validate@${VEE_VERSION} @vee-validate/i18n${VEE_INT_VERSION} @vee-validate/rules${VEE_RULES_VERSION} qrcode.vue${QR_CODE_VERSION} @nuxtjs/i18n${I18N_VERSION} @nuxtjs/robots${NUXT_ROBOTS_VERSION} @vite-pwa/nuxt${VITE_PWA_NUXT_VERSION}
3842
COPY --from=build /app/.nuxt ./.nuxt
3943
COPY --from=build /app/api ./api
4044
COPY --from=build /app/assets ./assets
4145
COPY --from=build /app/components ./components
46+
COPY --from=build /app/config ./config
4247
COPY --from=build /app/content ./content
4348
COPY --from=build /app/interfaces ./interfaces
4449
COPY --from=build /app/layouts ./layouts
50+
COPY --from=build /app/locales ./locales
4551
COPY --from=build /app/middleware ./middleware
4652
COPY --from=build /app/pages ./pages
4753
COPY --from=build /app/plugins ./plugins
54+
COPY --from=build /app/public ./public
4855
COPY --from=build /app/static ./static
4956
COPY --from=build /app/stores ./stores
5057
COPY --from=build /app/utilities ./utilities

‎{{cookiecutter.project_slug}}/frontend/api/auth.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,23 @@ export const apiAuth = {
146146
}
147147
)
148148
},
149+
async requestValidationEmail(token: string) {
150+
return await useFetch<IMsg>(`${apiCore.url()}/users/send-validation-email`,
151+
{
152+
method: "POST",
153+
headers: apiCore.headers(token)
154+
}
155+
)
156+
},
157+
async validateEmail(token: string, validation: string) {
158+
return await useFetch<IMsg>(`${apiCore.url()}/users/validate-email`,
159+
{
160+
method: "POST",
161+
body: { validation },
162+
headers: apiCore.headers(token)
163+
}
164+
)
165+
},
149166
// ADMIN USER MANAGEMENT
150167
async getAllUsers(token: string) {
151168
return await useFetch<IUserProfile[]>(`${apiCore.url()}/users/all`,

‎{{cookiecutter.project_slug}}/frontend/app.vue‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
<template>
2-
<div class="h-full">
3-
<NuxtLayout>
4-
<NuxtPage/>
5-
</NuxtLayout>
2+
<div>
3+
<Head>
4+
<Link rel="icon" href="/favicon.ico" sizes="any" />
5+
<Link rel="icon" href="/favicon.svg" type="image/svg+xml" />
6+
<Link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
7+
</Head>
8+
<div class="h-full">
9+
<VitePwaManifest />
10+
<NuxtLoadingIndicator />
11+
<NuxtLayout>
12+
<NuxtPage/>
13+
</NuxtLayout>
14+
</div>
615
</div>
716
</template>

‎{{cookiecutter.project_slug}}/frontend/components/alerts/Button.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
</template>
1010

1111

12-
<script setup>
12+
<script setup lang="ts">
1313
import { BellIcon } from "@heroicons/vue/24/outline"
1414
</script>

‎{{cookiecutter.project_slug}}/frontend/components/authentication/Navigation.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<!-- Profile dropdown -->
33
<Menu as="div" class="relative ml-3">
44
<div v-if="!authStore.loggedIn">
5-
<NuxtLink
5+
<LocaleLink
66
to="/login"
77
class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2"
88
>
99
<ArrowLeftOnRectangleIcon class="block h-6 w-6" />
10-
</NuxtLink>
10+
</LocaleLink>
1111
</div>
1212
<div v-else>
1313
<MenuButton class="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2">
@@ -22,11 +22,11 @@
2222
:key="`nav-${i}`"
2323
v-slot="{ active }"
2424
>
25-
<NuxtLink
25+
<LocaleLink
2626
:to="nav.to"
2727
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
2828
>{{ nav.name }}
29-
</NuxtLink>
29+
</LocaleLink>
3030
</MenuItem>
3131
<MenuItem v-slot="{ active }">
3232
<a
@@ -42,7 +42,7 @@
4242
</template>
4343

4444

45-
<script setup>
45+
<script setup lang="ts">
4646
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue"
4747
import { ArrowLeftOnRectangleIcon } from "@heroicons/vue/24/outline"
4848
import { useAuthStore } from "@/stores"

‎{{cookiecutter.project_slug}}/frontend/components/layouts/default/Footer.vue‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="mx-auto max-w-md overflow-hidden py-12 px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
44
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
55
<div v-for="item in footerNavigation.main" :key="item.name" class="px-5 py-2">
6-
<NuxtLink :to="item.to" class="text-base text-gray-400 hover:text-gray-300">{{ item.name }}</NuxtLink>
6+
<LocaleLink :to="item.to" class="text-base text-gray-400 hover:text-gray-300">{{ t(item.name) }}</LocaleLink>
77
</div>
88
</nav>
99
<div class="mt-8 flex justify-center space-x-6">
@@ -12,19 +12,23 @@
1212
<component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
1313
</a>
1414
</div>
15-
<p class="mt-8 text-center text-base text-gray-400">&copy; 2022 {{ siteName }}. All rights reserved.</p>
15+
<div class="flex justify-between">
16+
<p class="mt-8 text-center text-base text-gray-400">&copy; 2022 {{ t(siteName) }}. {{ t("footer.rights") }}</p>
17+
<LocaleDropdown />
18+
</div>
1619
</div>
1720
</footer>
1821
</template>
1922

2023
<script setup lang="ts">
21-
const siteName: String = "Your Company, Inc"
24+
const { t } = useI18n()
25+
const siteName: string = "common.title"
2226
2327
const footerNavigation = {
2428
main: [
25-
{ name: "About", to: "/about" },
26-
{ name: "Authentication", to: "/authentication" },
27-
{ name: "Blog", to: "/blog" },
29+
{ name: "nav.about", to: "/about" },
30+
{ name: "nav.authentication", to: "/authentication" },
31+
{ name: "nav.blog", to: "/blog" },
2832
],
2933
social: [
3034
{
@@ -57,4 +61,29 @@ const footerNavigation = {
5761
},
5862
],
5963
}
60-
</script>
64+
</script>
65+
66+
<style>
67+
.pwa-toast {
68+
position: fixed;
69+
right: 0;
70+
bottom: 0;
71+
margin: 16px;
72+
padding: 12px;
73+
border: 1px solid #8885;
74+
border-radius: 4px;
75+
z-index: 1;
76+
text-align: left;
77+
box-shadow: 3px 4px 5px 0 #8885;
78+
}
79+
.pwa-toast .message {
80+
margin-bottom: 8px;
81+
}
82+
.pwa-toast button {
83+
border: 1px solid #8885;
84+
outline: none;
85+
margin-right: 5px;
86+
border-radius: 2px;
87+
padding: 3px 10px;
88+
}
89+
</style>

‎{{cookiecutter.project_slug}}/frontend/components/layouts/default/Navigation.vue‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,49 +12,52 @@
1212
</DisclosureButton>
1313
</div>
1414
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
15-
<NuxtLink to="/" class="flex flex-shrink-0 items-center">
15+
<LocaleLink to="/" class="flex flex-shrink-0 items-center">
1616
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=rose&shade=600" alt="Your Company" />
1717
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=rose&shade=600" alt="Your Company" />
18-
</NuxtLink>
18+
</LocaleLink>
1919
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
20-
<NuxtLink
20+
<LocaleLink
2121
v-for="(nav, i) in navigation"
2222
:key="`nav-${i}`"
2323
:to="nav.to"
2424
class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900 hover:text-rose-500"
25-
>{{ nav.name }}</NuxtLink>
25+
>{{ t(nav.name) }}</LocaleLink>
2626
</div>
2727
</div>
2828
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
29+
<PwaBadge />
30+
<PwaInstallPrompt />
2931
<AlertsButton />
3032
<AuthenticationNavigation />
3133
</div>
3234
</div>
3335
</div>
34-
36+
3537
<DisclosurePanel class="sm:hidden">
3638
<div class="space-y-1 pt-2 pb-4">
3739
<!-- Current: "bg-rose-50 border-rose-500 text-rose-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
38-
<NuxtLink
40+
<LocaleLink
3941
v-for="(nav, i) in navigation"
4042
:key="`nav-mobile-${i}`"
4143
:to="nav.to"
4244
class="block hover:border-l-4 hover:border-rose-500 hover:bg-rose-50 py-2 pl-3 pr-4 text-base font-medium text-rose-700">
43-
{{ nav.name }}
44-
</NuxtLink>
45+
{{ t(nav.name) }}
46+
</LocaleLink>
4547
</div>
4648
</DisclosurePanel>
4749
</Disclosure>
4850
</header>
49-
</template>
50-
51-
<script setup>
52-
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"
53-
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline"
51+
</template>
52+
53+
<script setup lang="ts">
54+
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"
55+
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline"
5456
55-
const navigation = [
56-
{ name: "About", to: "/about" },
57-
{ name: "Authentication", to: "/authentication" },
58-
{ name: "Blog", to: "/blog" },
59-
]
60-
</script>
57+
const { t } = useI18n()
58+
const navigation = [
59+
{ name: "nav.about", to: "/about" },
60+
{ name: "nav.authentication", to: "/authentication" },
61+
{ name: "nav.blog", to: "/blog" },
62+
]
63+
</script>

‎{{cookiecutter.project_slug}}/frontend/components/layouts/home/Navigation.vue‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,17 @@
1717
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=rose&shade=600" alt="Your Company" />
1818
</div>
1919
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
20-
<NuxtLink
20+
<LocaleLink
2121
v-for="(nav, i) in navigation"
2222
:key="`nav-${i}`"
2323
:to="nav.to"
2424
class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900 hover:text-rose-500"
25-
>{{ nav.name }}</NuxtLink>
25+
>{{ t(nav.name) }}</LocaleLink>
2626
</div>
2727
</div>
2828
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
29+
<PwaBadge />
30+
<PwaInstallPrompt />
2931
<AlertsButton />
3032
<AuthenticationNavigation />
3133
</div>
@@ -35,26 +37,27 @@
3537
<DisclosurePanel class="sm:hidden">
3638
<div class="space-y-1 pt-2 pb-4">
3739
<!-- Current: "bg-rose-50 border-rose-500 text-rose-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
38-
<NuxtLink
40+
<LocaleLink
3941
v-for="(nav, i) in navigation"
4042
:key="`nav-mobile-${i}`"
4143
:to="nav.to"
4244
class="block hover:border-l-4 hover:border-rose-500 hover:bg-rose-50 py-2 pl-3 pr-4 text-base font-medium text-rose-700">
43-
{{ nav.name }}
44-
</NuxtLink>
45+
{{ t(nav.name) }}
46+
</LocaleLink>
4547
</div>
4648
</DisclosurePanel>
4749
</Disclosure>
4850
</header>
49-
</template>
50-
51-
<script setup>
52-
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"
53-
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline"
51+
</template>
5452

55-
const navigation = [
56-
{ name: "About", to: "/about" },
57-
{ name: "Authentication", to: "/authentication" },
58-
{ name: "Blog", to: "/blog" },
59-
]
60-
</script>
53+
<script setup lang="ts">
54+
import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"
55+
import { Bars3Icon, XMarkIcon } from "@heroicons/vue/24/outline"
56+
57+
const { t } = useI18n()
58+
const navigation = [
59+
{ name: "nav.about", to: "/about" },
60+
{ name: "nav.authentication", to: "/authentication" },
61+
{ name: "nav.blog", to: "/blog" },
62+
]
63+
</script>

0 commit comments

Comments
 (0)