PlayTexX
PlayTexX
PostsComments
NNuxt
Created by PlayTexX on 9/30/2024 in #❓・help
How to add canonical tag ?
Hello, I wanted to know how to add canonical tag in Nuxt 3 ? I tried to add '@nuxtjs/sitemap' and '@nuxtjs/robots' And I added this to my nuxt config : site: { url: 'https://www.o2012.fr', }, seo: { redirectToCanonicalSiteUrl: true },
1 replies
NNuxt
Created by PlayTexX on 9/16/2024 in #❓・help
Cloudinary Upload Widget Example ?
Hello, I try to use Cloudinary Upload Widget example (https://cloudinary.nuxtjs.org/) but I have cors error, do you have an example of setup in localhost to work with ?
1 replies
NNuxt
Created by PlayTexX on 9/11/2024 in #❓・help
Page not found : /false on npm run generate
Hello, I checked all my files, I have only one page, simple website. I dont know why I have this error.
2 replies
NNuxt
Created by PlayTexX on 3/1/2024 in #❓・help
Set a const when go to a page ?
Hello guys, can I go to a page and pass an object ? I have this in my admin/races/create.vue const race = ref<RaceFormInterface>(<RaceFormInterface>{ id: null, raceType: 0, name: '', gender: '', date: '', time: '', distance: 0, price: 0, paymentTypes: [], maxParticipants: 0, description: '' }) Is it possible from a page (ex : /admin/races) to have a NuxtLink and where I can say :race="itemRace (from a v-for)" which go to /admin/race/create and set the race object in the create.vue ?
2 replies
NNuxt
Created by PlayTexX on 2/24/2024 in #❓・help
Import script in a page
Hello, I have here my navbar, I have my template v-else with a dropdown, how to import my typescript in the Navbar component ? And is it a better way to do it ? Thanks you Env: Nuxt 3 TailwindCSS 
document.addEventListener('DOMContentLoaded', function () {
    const dropdowns = document.querySelectorAll('.dropdown');

    dropdowns.forEach(function(dropdown: Element) {
        const action = dropdown.querySelector('.dropdown-action') as HTMLElement;
        const menu = dropdown.querySelector('.dropdown-menu') as HTMLElement;

        if (action !== null && menu !== null) {
            menu.classList.add('animate__animated', 'animate__bounceOut');

            // Wait for animation to end to add hidden class
            menu.addEventListener('animationend', (event) => {
                if(!menu.classList.contains('hidden')) {
                    if ((event as AnimationEvent).animationName === 'bounceOut') {
                        // Add the hidden class after the bounceOut animation ends
                        menu.classList.add('hidden');
                    }
                }
            });

            // On click, add animation to show or hide the dropdown
            action.addEventListener('click', () => {
                // Check if the menu is currently hidden
                if (menu.classList.contains('animate__bounceOut')) {
                    // Show the menu and add animation classes
                    menu.classList.remove('hidden');
                    menu.classList.remove('animate__bounceOut');
                    menu.classList.add('animate__bounceIn');
                } else {
                    // Hide the menu and remove animation classes
                    menu.classList.remove('animate__bounceIn');
                    menu.classList.add('animate__bounceOut');
                }
            });
        }
    });
});
document.addEventListener('DOMContentLoaded', function () {
    const dropdowns = document.querySelectorAll('.dropdown');

    dropdowns.forEach(function(dropdown: Element) {
        const action = dropdown.querySelector('.dropdown-action') as HTMLElement;
        const menu = dropdown.querySelector('.dropdown-menu') as HTMLElement;

        if (action !== null && menu !== null) {
            menu.classList.add('animate__animated', 'animate__bounceOut');

            // Wait for animation to end to add hidden class
            menu.addEventListener('animationend', (event) => {
                if(!menu.classList.contains('hidden')) {
                    if ((event as AnimationEvent).animationName === 'bounceOut') {
                        // Add the hidden class after the bounceOut animation ends
                        menu.classList.add('hidden');
                    }
                }
            });

            // On click, add animation to show or hide the dropdown
            action.addEventListener('click', () => {
                // Check if the menu is currently hidden
                if (menu.classList.contains('animate__bounceOut')) {
                    // Show the menu and add animation classes
                    menu.classList.remove('hidden');
                    menu.classList.remove('animate__bounceOut');
                    menu.classList.add('animate__bounceIn');
                } else {
                    // Hide the menu and remove animation classes
                    menu.classList.remove('animate__bounceIn');
                    menu.classList.add('animate__bounceOut');
                }
            });
        }
    });
});
4 replies
NNuxt
Created by PlayTexX on 2/23/2024 in #❓・help
Error 500 on fetch user, but API returns me data
Hello, I have 500 error, but I dont know why because the API call is good 500 [GET] "https://localhost:9001/api/user": <no response> fetch failed at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.00501375.mjs:228:14) at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15) at async Module.useApiFetch (./composables/useApiFetch.ts:20:10) at async Proxy.fetchUser (./stores/authStore.ts:34:24) at async ./plugins/loadUser.ts:10:85 at async setup (./virtual:nuxt:/home/thibaut/projects/nuxt-3/.nuxt/plugins/server.mjs:40:116) at async Object.callAsync (./node_modules/unctx/dist/index.mjs:72:16) at async applyPlugin (./node_modules/nuxt/dist/app/nuxt.js:116:25) at async executePlugin (./node_modules/nuxt/dist/app/nuxt.js:153:9) Here is the method called in a loadUser plugin 
import { useAuthStore } from "~/stores/authStore"

export default defineNuxtPlugin(async (nuxtApp) => {
  // console.log('loadUser')
  const auth = useAuthStore()
  // console.log('isloggedIn', auth.isLoggedIn)
  if (!auth.isLoggedIn) {
    // console.log('fetchUser')
    await auth.fetchUser()
  }
})
import { useAuthStore } from "~/stores/authStore"

export default defineNuxtPlugin(async (nuxtApp) => {
  // console.log('loadUser')
  const auth = useAuthStore()
  // console.log('isloggedIn', auth.isLoggedIn)
  if (!auth.isLoggedIn) {
    // console.log('fetchUser')
    await auth.fetchUser()
  }
})
async fetchUser() {
      const response = await useApiFetch('/user', {
        method: 'GET'
      })

      console.log('RESPONSE', response)
      this.user = response as UserInterface
    },
async fetchUser() {
      const response = await useApiFetch('/user', {
        method: 'GET'
      })

      console.log('RESPONSE', response)
      this.user = response as UserInterface
    },
Here is the console : GET http://localhost:3000/ 500 (Internal Server Error) devtools.client.mjs?v=83be3009:51 ✨ Nuxt DevTools Press Shift + Alt + D to open DevTools authStore.ts:50 RESPONSE {id: 2, email: '[email protected]', scope: Array(2)} chunk-L5BJSZYY.js?v=83be3009:2898 <Suspense> is an experimental feature and its API will likely change. backend.js:3301 🍍 "auth" store installed 🆕
2 replies
NNuxt
Created by PlayTexX on 2/19/2024 in #❓・help
Tailwind Jetbrains Intellisense
Hi, I configured TailwindCSS for my project, the classes are working but I have no intellisense. Is someone know how to add it ?
8 replies