Hugo Posts - Answer Overflow

Hi guys, it'm trying to create a google place autocomplete input for my nuxt app. I'm struggling so hard on making it. when i call the api when the user enter keys in the input i got cors error. I'm not sure what i'm supposed to do, in order to keep safe my key too. If someone have some tips i would be grateful.

<script setup>
import { ref, onMounted, watch } from 'vue'

const config = useRuntimeConfig()
const apiKey = config.public.googleMapAPIKey

const modelValue = ref('')

const fetchData = async (query) => {
  const {data} = await $fetch(`https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&key=${apiKey}`, {
    method: 'GET',
  })
  console.log(data);
}

watch(modelValue, (newValue) => {
  if (newValue.length > 3) {
    fetchData(newValue)
  } else {
  }
})
</script>

<template>
  <div>
    <div>
      <input
        v-model="modelValue"
        name="search_location"
        id="search_location"
        placeholder="Recherche une adresse/ville"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const config = useRuntimeConfig()
const apiKey = config.public.googleMapAPIKey

const modelValue = ref('')

const fetchData = async (query) => {
  const {data} = await $fetch(`https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&key=${apiKey}`, {
    method: 'GET',
  })
  console.log(data);
}

watch(modelValue, (newValue) => {
  if (newValue.length > 3) {
    fetchData(newValue)
  } else {
  }
})
</script>

<template>
  <div>
    <div>
      <input
        v-model="modelValue"
        name="search_location"
        id="search_location"
        placeholder="Recherche une adresse/ville"
      />
    </div>
  </div>
</template>

10 replies

NNuxt

•Created by Hugo on 12/10/2024 in #❓・help

Hydratation text mismatch on

Hello i have an issue i can't fix it. i have an hydratation mismatch on the component PartOfferCard when i want to display the dateStart Parent component where i get the datas

<script setup lang="ts">

import type { BlockFeatPremiumOffers } from './feat-premium-offers-types';
defineProps<{
    data: BlockFeatPremiumOffers;
}>();


const baseURL = useRuntimeConfig().public.directusUrl
const { data: offers} = await useFetch(`${baseURL}/api/offers`,{
    query:{
        isPremium: true,
        perPage: 9
    }
})
</script>
<script lang="ts">
    import '@splidejs/vue-splide/css';
    import { Splide, SplideSlide } from '@splidejs/vue-splide';
    export default defineComponent( {
    components: {
        Splide,
        SplideSlide,
    },
    } );
</script>

<template>
    <BlockContainer class="block-feat-premium-offers my-10 bg-secondary-100 lg:my-20">
          <div v-for="(offer, index) in offers.data">
          <PartsOfferCard :offer="offer" variant="premium"></PartsOfferCard>
      </div>
    </BlockContainer>
</template>

<script setup lang="ts">

import type { BlockFeatPremiumOffers } from './feat-premium-offers-types';
defineProps<{
    data: BlockFeatPremiumOffers;
}>();


const baseURL = useRuntimeConfig().public.directusUrl
const { data: offers} = await useFetch(`${baseURL}/api/offers`,{
    query:{
        isPremium: true,
        perPage: 9
    }
})
</script>
<script lang="ts">
    import '@splidejs/vue-splide/css';
    import { Splide, SplideSlide } from '@splidejs/vue-splide';
    export default defineComponent( {
    components: {
        Splide,
        SplideSlide,
    },
    } );
</script>

<template>
    <BlockContainer class="block-feat-premium-offers my-10 bg-secondary-100 lg:my-20">
          <div v-for="(offer, index) in offers.data">
          <PartsOfferCard :offer="offer" variant="premium"></PartsOfferCard>
      </div>
    </BlockContainer>
</template>

OfferCard Component

<script setup type="ts">
import { DateTime } from 'luxon';

const props = defineProps({
    offer: {
        type: undefined,
        required: true,
    },
    variant: {
        default: '',
        validator: (value) => ['', 'premium'].includes(value),
    },
})
const offer = computed(() => props.offer)
const variant = computed(() => props.variant)
const dateStart = computed(() => DateTime.fromISO(props.offer.date_start).toRelative())
</script>
<template>
    
    <div class="aspect-square bg-white shadow-offer-card">
        <p class="flex items-center gap-2 text-sm italic text-secondary">
          {{dateStart}}
        </p>
    </div>
</template>

<script setup type="ts">
import { DateTime } from 'luxon';

const props = defineProps({
    offer: {
        type: undefined,
        required: true,
    },
    variant: {
        default: '',
        validator: (value) => ['', 'premium'].includes(value),
    },
})
const offer = computed(() => props.offer)
const variant = computed(() => props.variant)
const dateStart = computed(() => DateTime.fromISO(props.offer.date_start).toRelative())
</script>
<template>
    
    <div class="aspect-square bg-white shadow-offer-card">
        <p class="flex items-center gap-2 text-sm italic text-secondary">
          {{dateStart}}
        </p>
    </div>
</template>

10 replies

NNuxt

•Created by Hugo on 12/1/2024 in #❓・help

Scss and tailwind on nuxt

5 replies

NNuxt

•Created by Hugo on 11/2/2024 in #❓・help

Add custom font with tailwind plugin

Hello guys, i'm struggling for 4 hours now on trying to import custom fonts on my project. I try to add the font with a tailwind plugin (so i can just copy the plugin and change the fonts on my diferents projects) But i can't make it work, the font class is created, but the font familly is not recognized. I added all woff and woff2 files in my /asset/fonts/font_name/ folder also i defined my font in tw theme:

fontFamily: {
  primary: 'Space Grotesk',
},

fontFamily: {
  primary: 'Space Grotesk',
},

then i tried several methods to add the font. in the theme:

fontFamilies:[
    {
        "fontFamily": "Space Grotesk",
        "name": "Principale",
        "slug": "primary",
        "fontFace": [
            {
            "fontFamily": "Space Grotesk",
            "fontWeight": "400",
            "fontStyle": "normal",
            "fontStretch": "normal",
            "src": [
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff",
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2"
            ]
            },
        ]
        },
],

fontFamilies:[
    {
        "fontFamily": "Space Grotesk",
        "name": "Principale",
        "slug": "primary",
        "fontFace": [
            {
            "fontFamily": "Space Grotesk",
            "fontWeight": "400",
            "fontStyle": "normal",
            "fontStretch": "normal",
            "src": [
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff",
                "file:./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2"
            ]
            },
        ]
        },
],

didn't worked, with css :

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

@font-face{
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2") format("woff2"),url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff") format("woff"),
}

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

@font-face{
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff2") format("woff2"),url("./assets/fonts/space_grotesk/SpaceGrotesk-Regular.woff") format("woff"),
}

didn't worked too. I'm lost, it's patethic to be lost on "Font customization"

10 replies

RRefine

•Created by ratty-blush on 5/30/2024 in #ask-any-question

Refine projects

Hi, i just discover Refine, and i really want to use it to make my dashboard, but i already a "vanilla" dashboard with only a different route in my client(front) vite app. If i start a Refine dashboard, how can i plug it to my client in order to only have 2 node server running instead of 3 (backend, dashboard and front)

5 replies

DTDrizzle Team

•Created by Hugo on 9/28/2023 in #help

Mysql Syntax error executing query

29 replies

DTDrizzle Team

•Created by Hugo on 9/26/2023 in #help

Select Entry in db with relational tables

24 replies

DTDrizzle Team

•Created by Hugo on 9/15/2023 in #help

ForeignKey Too Long

Hi Drizzle Devs ! I would like to know if you are working on the functionnality to customize fk naming because i can't fully migrate because my foreign key is too long

4 replies

DTDrizzle Team

•Created by Hugo on 9/15/2023 in #help

Drizzle workflow on schema modification

Hi, can someone explain me the process to follow when we modify the schema to push modifications to database please. I'm working on 2 computers, and when i modify schema like adding constraints, when i go to my second computer, i run drizzle-kit introspect:mysql and push:mysql but no modifications are added, also if i drop my table and recreate it with drizzle push:mysl, constraints are not added to my tables. I think feel verry dumb because i can't understand how to work with drizzle when we make modifications. also when i use generate:mysql there is no changes

7 replies

DTDrizzle Team

•Created by Hugo on 9/11/2023 in #help

Is it good to use UUID as primary key ?

Hi, i want to define manually an id for my entry to be able to create at tame time a folder with same id. So using uuid can be a problem ? or maybe i have to get a normal id used for everything, and a uuid used to identify my entry in folders (for images) and for client supports ?

  id_store: int("id_store").primaryKey().autoincrement(),
  uuid: uuid("uuid").notNull(),
  id_currency: int("id_currency").references(() => currencies.id_currency),
  name: varchar("name", { length: 256 }),

  id_store: int("id_store").primaryKey().autoincrement(),
  uuid: uuid("uuid").notNull(),
  id_currency: int("id_currency").references(() => currencies.id_currency),
  name: varchar("name", { length: 256 }),

39 replies

DTDrizzle Team

•Created by Hugo on 8/29/2023 in #help

Zod schema validation from Drizzle schema

4 replies

DTDrizzle Team

•Created by Hugo on 8/27/2023 in #help

Get database informations inside 'use client' component

Hello, i would like to display categories from my database in my 'use client" component, how can i do ? i don't understand why i have this error when calling database: Module not found: Can't resolve 'net'

16 replies

RRefine

•Created by foreign-sapphire on 7/1/2023 in #ask-any-question

[GSI_LOGGER]: The given origin is not allowed for the given client ID.

15 replies

Gaming

Programming