Import .env for api

nuxt.config.ts

@@ -7,6 +7,7 @@ import build from './settings/Build'
 import arch from './settings/Arch'
 import plugins from './settings/Plugins'
 import css from './settings/Style'
+import configs from './settings/RuntimeConfig'
 
 export default defineNuxtConfig({
   head,
@@ -15,5 +16,6 @@ export default defineNuxtConfig({
   build,
   plugins,
   css,
-  buildModules
+  buildModules,
+  ...configs
 } as NuxtConfig)

package.json

@@ -12,6 +12,7 @@
     "@nuxt/content": "^1.14.0",
     "@nuxtjs/axios": "^5.13.1",
     "@nuxtjs/composition-api": "^0.22.4",
+    "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/redirect-module": "^0.3.1",
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",

settings/Modules.ts

@@ -79,6 +79,10 @@ const redirect = [
   { from: '/resume', to: '/cv' }
 ]
 
+const env = {
+  path: process.cwd()
+}
+
 export default [
   ['@nuxtjs/axios', axios],
   ['nuxt-i18n', i18n],
@@ -86,6 +90,7 @@ export default [
   ['@nuxtjs/universal-storage', storage],
   ['@nuxtjs/robots', robots],
   ['@nuxtjs/sitemap', sitemap],
-  ['@nuxtjs/redirect-module', redirect]
+  ['@nuxtjs/redirect-module', redirect],
+  ['@nuxtjs/dotenv', env]
 
 ] as NuxtOptionsModule[]

settings/RuntimeConfig.ts

@@ -0,0 +1,9 @@
+const publicRuntimeConfig = {
+
+}
+
+const privateRuntimeConfig = {
+  API_TOKEN: process.env.API_TOKEN
+}
+
+export default { publicRuntimeConfig, privateRuntimeConfig}

src/components/ContactForm.vue

@@ -79,25 +79,30 @@ export default {
     const {$axios} = useContext()
     const form = ref<Form>({} as Form)
     const handleForm = async () => {
-      await $axios.post('form',
+      const {data} = await $axios.post('form',
         {
           email: form.value.email,
           name: form.value.name,
           content: form.value.content,
           subject: form.value.subject
+        }, {
+          headers: {
+            'Authorization': `Bearer ${process.env.API_TOKEN}`
+          }
         })
-        .then(() => {
+      console.log(data)
-          success.value = true
+      if (data.status === 200) {
-          setTimeout(() => {
+        success.value = true
-            success.value = false
+        setTimeout(() => {
-            form.value = {} as Form
+          success.value = false
-          }, 5000)
+          form.value = {} as Form
-        }).catch(() => {
+        }, 5000)
-          error.value = true
+      } else {
-          setTimeout(() => {
+        error.value = true
-            error.value = false
+        setTimeout(() => {
-          }, 5000)
+          error.value = false
-        })
+        }, 5000)
+      }
     }
 
     const isSendable = computed(() => {

src/pages/blog/_slug.vue

@@ -139,21 +139,33 @@ export default defineComponent({
     const likes = ref(0)
 
     useAsync(() => {
-      $axios.get(`/posts/${slug.value}`).then((response) => {
+      $axios.get(`/posts/${slug.value}`, {
+        headers: {
+          'Authorization': `Bearer ${process.env.API_TOKEN}`
+        }
+      }).then((response) => {
         likes.value = response.data
       })
     })
 
     const handleLike = async () => {
       if (liked.value) {
-        const {data} = await $axios.post(`/posts/${post.value?.slug}/unlike`)
+        const {data} = await $axios.post(`/posts/${post.value?.slug}/unlike`, {}, {
+          headers: {
+            'Authorization': `Bearer ${process.env.API_TOKEN}`
+          }
+        })
         if (data.status === 200) {
           liked.value = false
           likes.value = data.post.likes
           $storage.removeCookie(`${slug.value}`)
         }
       } else {
-        const {data} = await $axios.post(`/posts/${post.value?.slug}/like`)
+        const {data} = await $axios.post(`/posts/${post.value?.slug}/like`, {}, {
+          headers: {
+            'Authorization': `Bearer ${process.env.API_TOKEN}`
+          }
+        })
         if (data.status === 200) {
           liked.value = true
           likes.value = data.post.likes

yarn.lock

@@ -1378,7 +1378,7 @@
     defu "^3.2.2"
     lodash.template "^4.5.0"
 
-"@nuxtjs/composition-api@^0.22.5":
+"@nuxtjs/composition-api@^0.22.4":
   version "0.22.4"
   resolved "https://registry.yarnpkg.com/@nuxtjs/composition-api/-/composition-api-0.22.4.tgz#e53db8a992aa79100baa292429c51ea6c58e749a"
   integrity sha512-JJwcyhVMCxjClogQjteFJ5hN+FeR0oLkzaBATpikV34woZ9/gzUuIxPzvOzq2hmjYty5qNGqZM+B3668R8Jwvw==
@@ -1390,6 +1390,14 @@
     ufo "^0.6.10"
     upath "^2.0.1"
 
+"@nuxtjs/dotenv@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/dotenv/-/dotenv-1.4.1.tgz#dd5abb98e22cc7ae27139d3aa606151034293128"
+  integrity sha512-DpdObsvRwC8d89I9mzz6pBg6e/PEXHazDM57DOI1mmML2ZjHfQ/DvkjlSzUL7T+TnW3b/a4Ks5wQx08DqFBmeQ==
+  dependencies:
+    consola "^2.10.1"
+    dotenv "^8.1.0"
+
 "@nuxtjs/proxy@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/proxy/-/proxy-2.1.0.tgz#fa7715a11d237fa1273503c4e9e137dd1bf5575b"
@@ -3557,7 +3565,7 @@ connect@^3.7.0:
     parseurl "~1.3.3"
     utils-merge "1.0.1"
 
-consola@^2.10.0, consola@^2.13.0, consola@^2.15.0, consola@^2.15.3, consola@^2.6.0, consola@^2.9.0:
+consola@^2.10.0, consola@^2.10.1, consola@^2.13.0, consola@^2.15.0, consola@^2.15.3, consola@^2.6.0, consola@^2.9.0:
   version "2.15.3"
   resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.3.tgz#2e11f98d6a4be71ff72e0bdf07bd23e12cb61550"
   integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
@@ -4182,7 +4190,7 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^8.2.0:
+dotenv@^8.1.0, dotenv@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==