SSR -> CSR

layouts/default.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
-    <AppHeader/>
+    <AppHeader />
     <div class="l-container">
       <slot />
     </div>
     <AppFooter />
   </div>
 </template>
-

nuxt.config.ts

@@ -1,7 +1,7 @@
 import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
-  // ssr: true,
+  ssr: false,
   runtimeConfig: {
     public: {
       kurocoApiDomain: 'https://dev-nuxt-corporate.g.kuroco.app',

pages/company/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <UiPageHeader :subject="response.details.subject" subheading="Company" />
-
     <article class="c-article">
       <div class="l-container--large l-container--contents">
         <div v-html="response.details.contents"></div>
@@ -14,6 +13,9 @@
 const config = useRuntimeConfig();
 
 const { data: response } = await useFetch(
-  `${config.public.kurocoApiDomain}/rcms-api/1/content/details/company`
+  `${config.public.kurocoApiDomain}/rcms-api/1/content/details/company`,
+  {
+    server: false,
+  }
 );
 </script>

pages/contact/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <UiPageHeader subject="お問い合わせ" subheading="Contact" />
-
     <section>
       <div class="l-container--small l-container--contents">
         <template v-if="submitted">
@@ -328,26 +327,27 @@ const errorRef = ref(null);
 const disabled = ref(true);
 const submitData = reactive({});
 const thanksText = ref(null);
-const y = ref('');
-const m = ref('');
-const d = ref('');
+const y = ref("");
+const m = ref("");
+const d = ref("");
 const loading = ref(false);
 
 const { data: response } = await useFetch(
   `${config.public.kurocoApiDomain}/rcms-api/1/inquiry/1`,
   {
-    credentials: 'include',
+    credentials: "include",
+    server: false,
   }
 );
 
-Object.keys(response.value.details.cols).forEach((key) => {
-  const object = response.value.details.cols[key];
+Object.keys(response.details.cols).forEach((key) => {
+  const object = response.details.cols[key];
 
   if (object.type === 5 || object.type === 10) {
     submitData[object.key] = ref([]);
   }
 
-  if (object.type === 10 && object.attribute.selection_type === 'multiple') {
+  if (object.type === 10 && object.attribute.selection_type === "multiple") {
     Object.keys(object.options[1].value).forEach((key) => {
       if (!submitData[object.key]) {
         submitData[object.key] = [];
@@ -369,15 +369,16 @@ const setYMD = (key) => {
 
 const handleFileChange = async (e) => {
   const fm = new FormData();
-  fm.append('file', e.target.files[0]);
+  fm.append("file", e.target.files[0]);
 
   try {
     const response = await $fetch(
       `${config.public.kurocoApiDomain}/rcms-api/1/upload`,
       {
-        credentials: 'include',
-        method: 'POST',
+        credentials: "include",
+        method: "POST",
         body: fm,
+        server: false,
       }
     );
     error.value = [];
@@ -387,8 +388,8 @@ const handleFileChange = async (e) => {
     errors.value = e?.data?.errors || [];
     nextTick(() => {
       errorRef.value.errorWrapperRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
+        behavior: "smooth",
+        block: "center",
       });
     });
   }
@@ -400,9 +401,10 @@ const handleOnSubmit = async () => {
     const response = await $fetch(
       `${config.public.kurocoApiDomain}/rcms-api/1/inquiry/1`,
       {
-        credentials: 'include',
-        method: 'POST',
+        credentials: "include",
+        method: "POST",
         body: submitData,
+        server: false,
       }
     );
     submitted.value = true;
@@ -411,8 +413,8 @@ const handleOnSubmit = async () => {
     errors.value = e?.data?.errors || [];
     nextTick(() => {
       errorRef.value.errorWrapperRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
+        behavior: "smooth",
+        block: "center",
       });
     });
   }

pages/index.vue

@@ -305,13 +305,14 @@ const config = useRuntimeConfig();
 const { data: news } = await useFetch(
   `${config.public.kurocoApiDomain}/rcms-api/1/news/list`,
   {
-    credentials: 'include',
+    credentials: "include",
+    server: false,
   }
 );
 const { data: ltdNews } = await useFetch(
   `${config.public.kurocoApiDomain}/rcms-api/1/ltd-news/list`,
   {
-    credentials: 'include',
+    credentials: "include",
     server: false,
   }
 );

pages/login/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <UiPageHeader subject="ログイン" subheading="Login" />
-
     <div class="l-container--small l-container--contents">
       <form @submit.prevent="handleSubmit" class="c-form">
         <UiAlertError v-if="error" :error="errorMessage" />
@@ -44,13 +43,13 @@
 const { login } = useAuth(); // uses the default signIn function provided by nuxt-auth
 
 const formData = reactive({
-  email: '',
-  password: '',
+  email: "",
+  password: "",
 });
 const error = ref(null);
 const errorMessage = [
   {
-    message: 'メールアドレスまたはパスワードが正しくありません。',
+    message: "メールアドレスまたはパスワードが正しくありません。",
   },
 ];
 
@@ -61,14 +60,14 @@ const handleSubmit = async () => {
     loading.value = true;
     await login({ ...formData });
 
-    useRouter().push('/');
+    useRouter().push("/");
   } catch (e) {
     error.value = e?.data?.errors || [];
   }
   loading.value = false;
 };
 
 const clearErrorMessages = () => {
-  errorMessage.value = '';
+  errorMessage.value = "";
 };
 </script>

pages/login/register/index.vue

@@ -1,7 +1,6 @@
 <template>
   <section>
     <UiPageHeader subject="会員登録" subheading="Sign Up" />
-
     <div class="l-container--small l-container--contents">
       <template v-if="signupDone">
         <UiAlertSuccess :message="message" />
@@ -75,13 +74,13 @@ const { login } = useAuth();
 
 const signupDone = ref(false);
 const user = ref({
-  name1: '',
-  name2: '',
-  email: '',
-  login_pwd: '',
+  name1: "",
+  name2: "",
+  email: "",
+  login_pwd: "",
 });
-const errorMessage = ref('');
-const message = '登録が完了しました';
+const errorMessage = ref("");
+const message = "登録が完了しました";
 const loading = ref(false);
 
 const handleSignup = async () => {
@@ -90,9 +89,10 @@ const handleSignup = async () => {
     await $fetch(
       `${config.public.kurocoApiDomain}/rcms-api/1/member/register`,
       {
-        method: 'POST',
-        credentials: 'include',
+        method: "POST",
+        credentials: "include",
         body: { ...user.value },
+        server: false,
       }
     );
     await login({
@@ -107,6 +107,6 @@ const handleSignup = async () => {
 };
 
 const clearErrorMessages = () => {
-  errorMessage.value = '';
+  errorMessage.value = "";
 };
 </script>

pages/login/reminder.vue

@@ -109,21 +109,19 @@
 
 <script setup>
 const config = useRuntimeConfig();
-
 const route = useRoute();
 const token = route.query.token;
 
 const formData = reactive({
-  email: '',
-  temporaryPassword: '',
-  password: '',
-  confirmPassword: '',
+  email: "",
+  temporaryPassword: "",
+  password: "",
+  confirmPassword: "",
 });
 
 const errors = ref([]);
 const errorRef = ref(null);
 const message = ref(null);
-
 const loading = ref(false);
 const sequenceDone = ref(false);
 
@@ -133,11 +131,12 @@ const resetPasswordRequest = async () => {
     const response = await $fetch(
       `${config.public.kurocoApiDomain}/rcms-api/1/reminder`,
       {
-        method: 'POST',
-        credentials: 'include',
+        method: "POST",
+        credentials: "include",
         body: {
           email: formData.email,
         },
+        server: false,
       }
     );
     errors.value = [];
@@ -147,8 +146,8 @@ const resetPasswordRequest = async () => {
     errors.value = e?.data?.errors || [];
     nextTick(() => {
       errorRef.value.errorWrapperRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
+        behavior: "smooth",
+        block: "center",
       });
     });
   }
@@ -157,7 +156,7 @@ const resetPasswordRequest = async () => {
 
 const resetPassword = async () => {
   if (formData.password != formData.confirmPassword) {
-    errors.value = [{ message: '確認用パスワードが一致していません' }];
+    errors.value = [{ message: "確認用パスワードが一致していません" }];
     return;
   }
 
@@ -166,13 +165,14 @@ const resetPassword = async () => {
     const response = await $fetch(
       `${config.public.kurocoApiDomain}/rcms-api/1/reminder`,
       {
-        method: 'POST',
-        credentials: 'include',
+        method: "POST",
+        credentials: "include",
         body: {
           token,
           temp_pwd: formData.temporaryPassword,
           login_pwd: formData.password,
         },
+        server: false,
       }
     );
     errors.value = [];
@@ -182,8 +182,8 @@ const resetPassword = async () => {
     errors.value = e?.data?.errors || [];
     nextTick(() => {
       errorRef.value.errorWrapperRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
+        behavior: "smooth",
+        block: "center",
       });
     });
   }