Yassaaa Posts - Answer Overflow

Yassaaa

•Created by Yassaaa on 8/13/2024 in #❓・help

Need help with creating mail templates with dynamic data and sending it

Summary: My goal is to send order confirmation emails using Nodemailer and Vue for email templates. I have successfully managed to: 1. Send emails using Nodemailer with SMTP. 2. Create email templates using Vue-mail but I did not use nuxt components? im not sure I am new to this nuxt module. Though I was able to use Tailwind in the email template. However, I am encountering issues when trying to combine these functionalities.

6 replies

NNuxt

•Created by Yassaaa on 7/8/2024 in #❓・help

Nuxt DevTools Modules page is bugged

6 replies

NNuxt

•Created by Yassaaa on 6/1/2024 in #❓・help

Tailwind CSS: Unhandled exception: require() of ES Module

How to fix this error I keep getting in WebStorm's notification sidebar when I am running bun run dev:

Tailwind CSS: Unhandled exception: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. at Object.  (d:\WebDev\nuxtApp\.nuxt\tailwind.config.cjs:2:22)

Tailwind CSS: Unhandled exception: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. at Object.  (d:\WebDev\nuxtApp\.nuxt\tailwind.config.cjs:2:22)

here is my package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@getbrevo/brevo": "^2.1.1",
    "@vercel/speed-insights": "^1.0.11",
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {
    "@nuxt/image": "^1.7.0",
    "@nuxtjs/device": "^3.1.1",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "@storyblok/nuxt": "^6.0.10",
    "@tailwindcss/forms": "^0.5.7",
    "daisyui": "^4.11.1",
    "nuxt-icon": "^0.6.10",
    "nuxt-twemoji": "^3.5.0",
    "nuxt-viewport": "^2.1.5"
  }
}

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@getbrevo/brevo": "^2.1.1",
    "@vercel/speed-insights": "^1.0.11",
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {
    "@nuxt/image": "^1.7.0",
    "@nuxtjs/device": "^3.1.1",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "@storyblok/nuxt": "^6.0.10",
    "@tailwindcss/forms": "^0.5.7",
    "daisyui": "^4.11.1",
    "nuxt-icon": "^0.6.10",
    "nuxt-twemoji": "^3.5.0",
    "nuxt-viewport": "^2.1.5"
  }
}

4 replies

NNuxt

•Created by Yassaaa on 5/31/2024 in #❓・help

Need help with brevo integration

I tried implementing this package: https://www.npmjs.com/package/@getbrevo/brevo as a plugin but it did not work and I got errors. I tried asking gpt and no luck. can someone help me? My goal is: - enter email & some other info in form - take all this data and send it via the api to brevo to create a contact there. for debugging I want to also retrieve every entry in a certain list in brevo here you can find the endpoints for getting all contacts: https://developers.brevo.com/reference/getcontacts-1

2 replies

NNuxt

•Created by Yassaaa on 4/9/2024 in #❓・help

nuxt-swiper how to use hash navigation?

I am trying to use swiper hash navigation module but I cant get it to work

2 replies

NNuxt

•Created by Yassaaa on 3/14/2024 in #❓・help

useFetch help - not working/fetching data

hey I might be using this completely wrong because im still new to nuxtjs but here goes: I am trying to use useFetch for getting data from https://valorant-api.com but it is not working. When I use old regular fetch it works with no problems and I don't know why useFetch is not working with the valorant-api. Because it works with now problem when I use it with the https://fakestoreapi.com/ api. here is the code:

<template>
  <div>

    <div class="grid grid-cols-4 gap-5">
        <div v-for="a in products"> //<- replace products with agents when using valorant-api
          <h3 class="text-red-500 font-bold text-2xl">{{a.displayName }}</h3>
          <img class="rounded-3xl" :src="a.image" :alt="a.displayName" /> //<-- if using valorant-api replace with: "a.displayIcon"
          <h3 class="text-red-500 font-bold">Info:</h3>
          <p>{{a.description}}</p>
        </div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>

// fetch agents
// uncomment this block for fetching data from valorant-api
// let url = 'https://valorant-api.com/v1/agents'
// const parameters = {"isPlayableCharacter":"true"}
// const queryParams = new URLSearchParams(parameters)
// url += `?${queryParams.toString()}`
// const headers = {
//     'Content-Type': 'application/json'
// }

// works
// const agents = ref([])
// onMounted(async () => {
//     const response = await fetch(url, {
//         method: 'GET',
//         headers: headers
//     })
//     const data = await response.json()
//     agents.value = data.data
// })

// does not work 
// const { data: agents} = await useFetch(url, {
//   method: 'GET',
//   headers: headers
// })

// fetch fake products
const {data: products} = await useFetch('https://fakestoreapi.com/products')


</script>

<style lang="scss" scoped>

</style>

<template>
  <div>

    <div class="grid grid-cols-4 gap-5">
        <div v-for="a in products"> //<- replace products with agents when using valorant-api
          <h3 class="text-red-500 font-bold text-2xl">{{a.displayName }}</h3>
          <img class="rounded-3xl" :src="a.image" :alt="a.displayName" /> //<-- if using valorant-api replace with: "a.displayIcon"
          <h3 class="text-red-500 font-bold">Info:</h3>
          <p>{{a.description}}</p>
        </div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>

// fetch agents
// uncomment this block for fetching data from valorant-api
// let url = 'https://valorant-api.com/v1/agents'
// const parameters = {"isPlayableCharacter":"true"}
// const queryParams = new URLSearchParams(parameters)
// url += `?${queryParams.toString()}`
// const headers = {
//     'Content-Type': 'application/json'
// }

// works
// const agents = ref([])
// onMounted(async () => {
//     const response = await fetch(url, {
//         method: 'GET',
//         headers: headers
//     })
//     const data = await response.json()
//     agents.value = data.data
// })

// does not work 
// const { data: agents} = await useFetch(url, {
//   method: 'GET',
//   headers: headers
// })

// fetch fake products
const {data: products} = await useFetch('https://fakestoreapi.com/products')


</script>

<style lang="scss" scoped>

</style>

10 replies

Gaming

Programming