Yassaaa Posts - Answer Overflow

Yassaaa

Explore posts from servers

NNuxt JCHJava Community | Help. Code. Learn.

•Created by Yassaaa on 1/21/2025 in #❓・help

LeafLet Map container is already initialized

Someone help me fix this issue? I tried looking around and I also tried using copilot to fix the issue but no luck. here is the code:

<template>
  <div class="w-[42rem] h-[32rem] place-self-center z-10">
    <LMap :zoom="zoom" :center="center" :use-global-leaflet="false" style="height: 100%; width: 100%;">
      <LTileLayer :url="tileUrl" :attribution="tileAttribution" layer-type="base" name="OpenStreetMap" />
      <LGeoJson :geojson="geojson" :options="regionStyle" @add="fitBounds" />
    </LMap>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import getGeoJson from '../../utils/leafletRegions'

// Map settings
const zoom = ref(6)
const center = ref([52.5200, 13.4050]) // Centered on Berlin

const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
const tileAttribution =
  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

// Define the styles for the regions
const regionStyle = {
  color: '#0000ff',
  weight: 1,
  opacity: 0.65,
  fillOpacity: 0.1,
}

const geojson = ref(getGeoJson())

// Function to fit the map bounds to the added regions
const fitBounds = (e) => {
  const map = e.target._map
  map.fitBounds(e.target.getBounds())
}
</script>

<style>
/* Custom styles for the map */
.leaflet-container {
  border-radius: 0.5rem;
}
</style>

<template>
  <div class="w-[42rem] h-[32rem] place-self-center z-10">
    <LMap :zoom="zoom" :center="center" :use-global-leaflet="false" style="height: 100%; width: 100%;">
      <LTileLayer :url="tileUrl" :attribution="tileAttribution" layer-type="base" name="OpenStreetMap" />
      <LGeoJson :geojson="geojson" :options="regionStyle" @add="fitBounds" />
    </LMap>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import getGeoJson from '../../utils/leafletRegions'

// Map settings
const zoom = ref(6)
const center = ref([52.5200, 13.4050]) // Centered on Berlin

const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
const tileAttribution =
  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

// Define the styles for the regions
const regionStyle = {
  color: '#0000ff',
  weight: 1,
  opacity: 0.65,
  fillOpacity: 0.1,
}

const geojson = ref(getGeoJson())

// Function to fit the map bounds to the added regions
const fitBounds = (e) => {
  const map = e.target._map
  map.fitBounds(e.target.getBounds())
}
</script>

<style>
/* Custom styles for the map */
.leaflet-container {
  border-radius: 0.5rem;
}
</style>

10 replies

NNuxt

•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