Adnan Erlansyah Comments - Answer Overflow

Topics

Adnan Erlansyah

•Created by Adnan Erlansyah on 12/6/2024 in #❓・help

How the best way or easy to import a component on the page of NuxtJS3?

@kapa.ai Why I can't import this component? although I've already made it and the path folder has already appropriate. <template> <div> <Map /> </div> </template> <script setup> import { Map } from "~/components/ui"; </script> <style scoped> </style>

9 replies

•Created by Adnan Erlansyah on 12/6/2024 in #❓・help

Will the environment variables from the project can be fiddle on the browser by user?

@kapa.ai how about if I set the variable on the client-side or composable that has installed environment variable on it. Will the variable can be console.log in the browser by user or just can be see it if I run it from code?

10 replies

•Created by Adnan Erlansyah on 12/5/2024 in #❓・help

How can I process some data on server-side and send it to the client-side

@kapa.ai Can you tell me more about If I want to to use the second way? it's to using the nuxt payload.

11 replies

•Created by Adnan Erlansyah on 12/5/2024 in #❓・help

How can I process some data on server-side and send it to the client-side

Can you tell me more about If I want to to use the second way? it's to using the nuxt payload.

11 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

how to apply css modules to hash css selectors in nuxtjs3?

@kapa.ai I mean how can I apply it on the component and make a style on the tailwindcss style.

14 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

how to apply css modules to hash css selectors in nuxtjs3?

@kapa.ai How about if I want to use the style from external link or main.css that's from the tailwindcss style.

14 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

How to access data env in composable?

@kapa.ai If so, then I wouldn't be able to encrypt the data in client side, although I need it to use the secret key to be able encrypt and decrypt from the client side. I just want to take the environment variables without any user know about the key.

30 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

How to access data env in composable?

@kapa.ai And then how I would be able to use the environment variable inside the method of composable. I mean from this one.

    /**
     * Encrypt data using crypto
     * @param {Object} data - The data to encrypt
     * @returns {String} - Encrypted data in base64 format
     */
    const encrypt = (data: any) => {
        console.log(secretKey)
        try {
            const dataString = JSON.stringify(data); // Convert data to string
            const encrypted = crypto.AES.encrypt(dataString, secretKey).toString(); // Encrypt using AES
            return encrypted;
        } catch (error) {
            console.error("Encryption failed:", error);
            throw error;
        }
    };

    /**
     * Encrypt data using crypto
     * @param {Object} data - The data to encrypt
     * @returns {String} - Encrypted data in base64 format
     */
    const encrypt = (data: any) => {
        console.log(secretKey)
        try {
            const dataString = JSON.stringify(data); // Convert data to string
            const encrypted = crypto.AES.encrypt(dataString, secretKey).toString(); // Encrypt using AES
            return encrypted;
        } catch (error) {
            console.error("Encryption failed:", error);
            throw error;
        }
    };

30 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

How to access data env in composable?

@kapa.ai I've already set up like this, but the result bypassKey is still shown. - my composable

// @ts-nocheck
import crypto from "crypto-js";

export default function useCrypto() {
    const config = useRuntimeConfig()

    // Bypass key from .env (simulated here, replace with actual loading mechanism)
    const secretKey = config.bypassKey ?? 'default-secret-key';

}

// @ts-nocheck
import crypto from "crypto-js";

export default function useCrypto() {
    const config = useRuntimeConfig()

    // Bypass key from .env (simulated here, replace with actual loading mechanism)
    const secretKey = config.bypassKey ?? 'default-secret-key';

}

- nuxt.config.ts

  runtimeConfig: {
    bypassKey: '',
    public: {
      nodeEnv: process.env.NODE_ENV,
      baseURL: process.env.BASE_URL,
      servicesAPI: process.env.SERVICE_API ?? '',
      vueAppMode: process.env.VUE_APP_MODE,
    }
  },

  runtimeConfig: {
    bypassKey: '',
    public: {
      nodeEnv: process.env.NODE_ENV,
      baseURL: process.env.BASE_URL,
      servicesAPI: process.env.SERVICE_API ?? '',
      vueAppMode: process.env.VUE_APP_MODE,
    }
  },

- .env

# Secret Keys
NUXT_BYPASS_KEY=helloworld32

# Secret Keys
NUXT_BYPASS_KEY=helloworld32

30 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

How to access data env in composable?

Is it secure to use runTimeConfig for the secret key @kapa.ai ?

30 replies

•Created by Adnan Erlansyah on 12/4/2024 in #❓・help

How to access data env in composable?

how about if I want to access from this object in nuxt config? @kapa.ai appConfig: { nodeEnv: process.env.NODE_ENV, baseURL: process.env.BASE_URL, servicesAPI: process.env.SERVICE_API ?? '', vueAppMode: process.env.VUE_APP_MODE, bypassKey: process.env.BYPASS_KEY ?? '', },

30 replies

•Created by Adnan Erlansyah on 12/2/2024 in #❓・help

References for general topics or new updates of NuxtJS 3 or VueJS

Thanks

6 replies

•Created by Adnan Erlansyah on 11/27/2024 in #❓・help

Issue can't render other pages

After I set pages: false in nuxt config, now I got this warn or error.

 WARN  [nuxt] Your project has layouts but the <NuxtLayout /> component has not been used.

 WARN  [nuxt] Your project has layouts but the <NuxtLayout /> component has not been used.

@kapa.ai

14 replies

•Created by Adnan Erlansyah on 11/27/2024 in #❓・help

Issue can't render other pages

My app.vue looking like this.

<template>
  <div class="container">
    <PartialLoading v-if="isLoading" />
    <NuxtLayout v-else>
      <NuxtLoadingIndicator :throttle="0" />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
const { start, finish, isLoading } = useLoadingIndicator()

// Manually start the loading indicator
start()

// Simulate some asynchronous operation
setTimeout(() => {
  // Finish the loading indicator
  finish()
}, 1000)

useHead({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => pageTitle ? `${pageTitle} - Komara Go Site` : 'Komara Site',
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

<template>
  <div class="container">
    <PartialLoading v-if="isLoading" />
    <NuxtLayout v-else>
      <NuxtLoadingIndicator :throttle="0" />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>
const { start, finish, isLoading } = useLoadingIndicator()

// Manually start the loading indicator
start()

// Simulate some asynchronous operation
setTimeout(() => {
  // Finish the loading indicator
  finish()
}, 1000)

useHead({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => pageTitle ? `${pageTitle} - Komara Go Site` : 'Komara Site',
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

is there any error or wrong code? @kapa.ai

14 replies

•Created by Adnan Erlansyah on 11/26/2024 in #❓・help

Custom Loading Screen when the browser is still process rendering

@kapa.ai I think it's still work for me, the state isLoading of useLoadingIndicator is still false although I've already refreshed and delayed the network of the browser.

10 replies

•Created by Adnan Erlansyah on 11/26/2024 in #❓・help

Custom Error Page in NuxtJS 3

@kapa.ai how about to add dynamic title on the error page. something like this.

// Title & Meta Tags
useHead({
  title: `${error?.statusCode} - ${titleErrorMessage}`,
});

// Title & Meta Tags
useHead({
  title: `${error?.statusCode} - ${titleErrorMessage}`,
});

10 replies

•Created by Adnan Erlansyah on 11/22/2024 in #❓・help

How to auto import file libs and using it on the page

@kapa.ai my libs folder is on the root project.

20 replies

•Created by Adnan Erlansyah on 11/22/2024 in #❓・help

How to auto import file libs and using it on the page

@kapa.ai Why I'm getting this warn when imported it. WARN [Vue Router warn]: No match found for location with path "/auth/~/libs/face-api" this is the code on my login page.

<template>
    <div>
        Login Page
    </div>
</template>

<script setup>

// Title & Meta Tags
useHead({
  title: 'Login Page'
})

const faceApiScript = useScript('~/libs/face-api')

</script>

<style scoped>

</style>

<template>
    <div>
        Login Page
    </div>
</template>

<script setup>

// Title & Meta Tags
useHead({
  title: 'Login Page'
})

const faceApiScript = useScript('~/libs/face-api')

</script>

<style scoped>

</style>

20 replies

•Created by Adnan Erlansyah on 11/22/2024 in #❓・help

How to auto import file libs and using it on the page

@kapa.ai how about if I want to import file script like this. <script src="./face-api.min.js"></script> <script src="./rfc-scripts.js"></script>

20 replies

•Created by Adnan Erlansyah on 11/22/2024 in #❓・help

How to change the title of page dynamically

@kapa.ai I've already did something like this. - Login Page:

<template>
    <div>
        Login Page
    </div>
</template>

<script setup>

definePageMeta({
  title: 'Login Page'
})

</script>

<style scoped>

</style>

<template>
    <div>
        Login Page
    </div>
</template>

<script setup>

definePageMeta({
  title: 'Login Page'
})

</script>

<style scoped>

</style>

- App.vue

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>

useHead({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => {
    console.log(pageTitle)
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

<template>
  <div class="container">
    <NuxtLayout>
      <NuxtLoadingIndicator :throttle="0" />
        <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup>

useHead({
  // title: 'KOMARA GO Site',
  titleTemplate: (pageTitle) => {
    console.log(pageTitle)
    return pageTitle ? `${pageTitle} - KOMARA GO Site` : 'Komara Site'
  },
  // ogTitle: 'My Amazing Site',
  // description: 'This is my amazing site, let me tell you all about it.',
  // ogDescription: 'This is my amazing site, let me tell you all about it.',
  // ogImage: 'https://example.com/image.png',
  // twitterCard: 'summary_large_image',
})

</script>

but the title of login page is still 'KOMARA Site'

11 replies