Yuri
Yuri
PostsComments
NNuxt
Created by Yuri on 10/18/2024 in #❓・help
JWT Example Project
Hello. I develop an online store with Nuxt. I used a third part Backend API before. Now I want to use /server/api for it. And inside /server/API/, requests are sending to the necessary services and the database. I plan to sign all requests with the JWT token and I will keep it in the cookie. Does anyone have examples of such real projects to see how it should be set up correctly?
1 replies
NNuxt
Created by Yuri on 10/3/2024 in #❓・help
Mock API
Hello! What can I use for Mock API. Example: It is my /server/api/contacts/ export default defineCachedEventHandler(async (_event) => { const data = await $fetch('https://example.com/contacts'); return { status: 'success', data, }; }, { maxAge: -1 }); How can I return mock data for 'https://example.com/contacts' (It is example url for back API)
1 replies
NNuxt
Created by Yuri on 6/29/2023 in #❓・help
Different tailwind config for desktop and mobile version
I'm using tailwind on my project. I want to separate mobile and desktop layouts. But I can't refuse breakpoints as they are necessary for desktop responsiveness (from 1280 to 1920). But if the mobile version is stretched to 1920 in the browser emulator, then the breakpoints modifiers from the desktop are connected to it. but I wouldn't want that. What can you think of? We have: two very different mobile and desktop versions. Purpose: to use tailwind for class atomicity and desktop adaptability, and in the mobile version only class atomicity. I am sorry for my English. 🙃
10 replies
NNuxt
Created by Yuri on 12/29/2022 in #❓・help
Different components for different types of devices
Hello. If I want the component to be rendered only cliend-side, I add a suffix .client. Is it possible to come up with something similar depending on the type of device? P.S. Now I'm using @nuxtjs/device to detect the device. 
import {LayoutHeaderDesktop, LayoutHeaderMobile} from "#components";
const { isDesktop } = useDevice();
const componentName = computed(()=> {
  return isDesktop ? LayoutHeaderDesktop : LayoutHeaderMobile;
})
import {LayoutHeaderDesktop, LayoutHeaderMobile} from "#components";
const { isDesktop } = useDevice();
const componentName = computed(()=> {
  return isDesktop ? LayoutHeaderDesktop : LayoutHeaderMobile;
})
5 replies