Yassaaa Posts - Answer Overflow

Yassaaa

Explore posts from servers

NNuxt JCHJava Community | Help. Code. Learn.

•Created by Yassaaa on 4/7/2025 in #❓・help

I just need help from the nuxt ai

I am getting this error in browser console after settingup nuxt project: runtime-core.esm-bundler.js:7013 <Suspense> is an experimental feature and its API will likely change. hook.js:608 [Vue warn]: Hydration node mismatch: - rendered on server:  (start of fragment) - expected on client: html at <App key=4 > at <NuxtRoot> overrideMethod @ hook.js:608 hook.js:608 Hydration completed but contains mismatches. overrideMethod @ hook.js:608 devtools.client.js:49 ✨ Nuxt DevTools Press Shift + Alt + D to open DevTools

16 replies

NNuxt

•Created by Yassaaa on 3/29/2025 in #❓・help

Help with Tailwind InteliSense in VSCode IDE

I am using VSCode with Tailwind CSS InteliSense extension. I am not getting any intelisense for tailwind in this project. in my other projects the intelisense works just fine (note they all use the nuxt/tailwind module) I followed this setup guide: https://tailwindcss.com/docs/installation/framework-guides/nuxt for this project I wanted to use Tailwind V4 with Nuxt here is a gist that includes all necessary information such as configurations files and workspace folder-tree: https://gist.github.com/YassaaaTU/c186674afc75042e1cd10429744500cc

31 replies

NNuxt

•Created by Yassaaa on 3/27/2025 in #❓・help

Need Help with `@nuxt/eslint` + Prettier + TypeScript Rules (Nuxt 3 + Tauri)

Hi everyone,
I'm working on a Nuxt 3 + Tauri project (initially based on the nuxtor template but with significant modifications). I'm trying to properly configure @nuxt/eslint with Prettier while ensuring that TypeScript rules are correctly applied, but I'm running into some issues.
Project Setup:
- Nuxt version: 3.16.0
- Tauri: 2.3.0
- ESLint version: 9.0.0
- @nuxt/eslint version: 1.2.0
- VSCode as the main editor
What I’m Trying to Achieve:
- A well-integrated ESLint setup using @nuxt/eslint (flat config).
- Prettier working alongside ESLint without conflicts.
- Enforcing TypeScript-specific rules (e.g., @typescript-eslint rules).
- VSCode properly recognizing and applying all formatting/linting rules.
Current Issues:
1. VSCode ESLint Behavior:
- I have "eslint.useFlatConfig": true enabled in my settings.
- "editor.formatOnSave": false (using ESLint for formatting).
- "editor.codeActionsOnSave" is commented out to avoid conflicts.
- ESLint sometimes fails to apply the expected TypeScript rules.
2. Prettier Integration:
- I’m not sure if Prettier is playing well with ESLint.
- Some formatting settings from my eslint.config.mjs (like quotes: backtick, braceStyle: allman) don’t seem to be consistently applied.
3. TypeScript Rules Not Behaving as Expected:
- Some TypeScript-related rules don’t seem to take effect.
- I get TypeScript rule errors for rules that I explicitly set to off, for example:
- '@typescript-eslint/no-explicit-any': 'off' → but ESLint still reports an error.
- This makes me think my rule overrides aren’t being properly applied.
Any advice or insights would be greatly appreciated! If you’ve successfully set up @nuxt/eslint with TypeScript and Prettier, I’d love to hear how you configured it. Thanks in advance! 🚀

86 replies

NNuxt

•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.

20 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