feat: draft

app/citizen-frontend/src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

app/citizen-frontend/src/plugins/i18n.ts

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world',
+    },
+  },
+  ja: {
+    message: {
+      hello: 'こんにちは、世界',
+    },
+  },
+}
+
+export default createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages,
+})

app/citizen-frontend/src/plugins/index.ts

@@ -0,0 +1,22 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Types
+import type { App } from 'vue'
+
+import { createPinia } from 'pinia'
+
+// Plugins
+import router from '../router'
+import i18n from './i18n'
+import vuetify from './vuetify'
+
+export function registerPlugins (app: App) {
+  app.use(vuetify)
+  app.use(createPinia())
+  app.use(i18n)
+  app.use(router)
+}

app/citizen-frontend/src/plugins/vuetify.ts

@@ -0,0 +1,36 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Composables
+import { createVuetify, type ThemeDefinition } from 'vuetify'
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+const HPTheme: ThemeDefinition = {
+  dark: false,
+  colors: {
+    'background': '#F0F9F6', // 頁面整體淡綠色背景
+    'surface': '#FFFFFF', // 卡片與白底區塊
+    'primary': '#1D7063', // 深松石綠 (主要品牌色)
+    'primary-darken-1': '#145248',
+    'secondary': '#E66926', // 亮橘色 (CTA 按鈕)
+    'secondary-darken-1': '#CC561B',
+    'accent': '#47C2A6', // 薄荷綠 (標籤與強調)
+    'error': '#B00020',
+    'info': '#2196F3',
+    'success': '#4CAF50',
+    'warning': '#FB8C00',
+  },
+}
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'HPTheme',
+    themes: { HPTheme },
+  },
+})