Questions tagged [nuxtjs3]

I've been experimenting with nuxt-image on NUXT3, but I've run into an issue when using the generate command. While images display correctly during development, they return a 404 error when using nuxt generate. In my nuxt config, I have: modules: ["@nuxt/ ...

Can cookies be utilized on the server side in Nuxt 3? For instance, I need to set a cookie in an API and then access its data in middleware: // ~/server/api/testApi.ts export default defineEventHandler(event => { /* setCookie('myCookie', 'myValue' ...

Take a look at my file structure below -shared --foo.ts -web-ui (nuxt project) --pages --index.vue --index.ts --tsconfig.json This is the tsconfig for my nuxt setup. { // https://v3.nuxtjs.org/concepts/typescript "exte ...

Could someone assist me with the dynamic routing while organizing pages in folders within Storyblok? Currently, I am facing an issue where the slug folder name is being appended to all the links displayed in the header. So, when a user clicks on a blog po ...

I am currently utilizing the Nuxt 3 / Vue 3 defineProps in conjunction with TypeScript and I am looking to automatically deduce prop types from TypeScript types. import { User } from '~/types/types' const props = defineProps({ users: { typ ...

I've been attempting to display a favicon on Safari, but it seems to be working on all other browsers except for Safari. The application I developed is running on Nuxt3 with the composition api. In the default layout, I have included the following c ...

I've been facing an issue while trying to deploy a Nuxt3 project using Github Actions to Firebase Hosting. The workflow script runs smoothly and the app builds without any errors. However, when accessing the testing channel URL, several CSS and JS fil ...

I have a server.js file located in the "Server" directory, which is connected to Nuxt.js server.js const express = require('express'); const app = express(); app.get('/api/data', (req, res) => { res.json({ message: 'Hello fr ...

I am in search of a solution to integrate Socket.IO with my Nuxt 3 application. My requirement is for the Nuxt app and the Socket.IO server to operate on the same port, and for the Socket.IO server to automatically initiate as soon as the Nuxt app is ready ...

Is it possible to detect the user's preference for color scheme and set a data-mode attribute on the document root (html)? I've been struggling with this. In my app.vue code, I have the following: <template> <div> <NuxtLayout /> <Nuxt ...

Encountering an error when utilizing @click in Nuxt3 with Typescript Issue: Type '($event: any) => void' is not compatible with type 'MouseEvent'.ts(2322) __VLS_types.ts(107, 56): The expected type is specified in the property 'click' declaration on typ ...

Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...

After fetching data from an api, I can see it logged in my async function. However, the data stored in my array is not rendering on my template in Nuxt 3 The script setup includes: //ARRAY OF ALL THE DAILY WEATHER DATA PER DAY let allDataWeather=[]; ( ...

I have been attempting to chain two fetch calls in Nuxt3, where the second call is dependent on the result of the first one and I need to use the resulting "variable" in a Vue component. My current approach is: <script setup> const url = "myurl ...

I have developed a custom function for caching management, specifically for storing responses from API calls. export const cache = async (key: string, callback: Function) => { const cacheKey = `cache:${key}`; const data = await useStorage().get ...

I am looking for a way to dynamically adjust the height value of a style applied to an element based on certain conditions. Specifically, when scrolling to the bottom, I want the height to be 77.5%, when the footer is not visible at all, it should be 100%, ...

Utilizing Vercel's AI SDK along with the useChat utility hook from Vercel in my Nuxt.js project, I'm developing a chat interface. Within this interface, I have multiple agents (such as General, Exercise, Cardiology) listed in a select dropdown menu. My goa ...

I am currently developing a Nuxt 3 module that includes a basic button component. The button is designed to toggle a boolean value when clicked, with the underlying logic stored in a separate file using pinia as a store. Here is an example of the store co ...

I'm struggling to generate a reusable hook, but the behavior I'm getting is not what I anticipated /composables/fetch.ts export const useFetchWithErrorHandler = async (url: string, options?: FetchOptions) => { const route = useRoute(); co ...

When attempting to utilize useLocalStorage from pinia, I am encountering an issue where the data in the store's state is not fetched from local storage and instead defaults to the default value. Below is the code snippet from my store method: import { use ...

I'm currently attempting to import a global Sass stylesheet from the /assets directory in order to utilize variables and mixins defined there throughout the components. My current configuration in nuxt.config.ts is as follows: import { defineNuxtConfig } f ...

I am currently exploring a method to allow users to specify the primary color of a website. When defining my Tailwind classes, I aim to utilize something like bg-primary-600 instead of directly inputting a color. This way, if the value for primary changes, ...

Currently utilizing Nuxt 3 and aiming to incorporate Vuetify into my project. Successfully integrated Vuetify, enabling the use of its components without issue. However, a warning message has surfaced and troubleshooting measures are unclear. Vuetify was ...

I tried following the instructions provided in this pinia persisted state plugin guide, but I am encountering an issue where my states reset on page refresh. Could there be a problem with my configuration? // nuxt.config modules: [ [ "@pinia/nux ...

I am attempting to send a variable containing HTML code from a Vue component using the POST method. My technology stack includes TypeScript, Nuxt.js, Node.js, and Vue.js. const order_list = document.querySelector('table') as HTMLInputElement | n ...

Within my content folder lies a directory named planets, housing yaml files for various planets. My goal is to display these planet pages as navigation items using the content navigation component. Currently, I am only able to obtain a link to the /plane ...

I recently encountered an issue when trying to implement dynamic OpenGraph meta tags on a dynamically generated route in Nuxt 3 (and Vue 3). I attempted to set the meta tags dynamically using Javascript, as it was the only dynamic option supported by Nuxt ...

Looking to create a basic photo gallery using NuxtJS 3. I plan on adding photos to either the public/ or assets/ directories, and then creating a static version of the site for deployment. I'm trying to figure out the optimal way to retrieve the content f ...

How can I effectively utilize data retrieved from an API in Nuxt3? For instance, I am trying to populate meta tags with information fetched from the API, but I keep running into an undefined error. The problem lies in my inability to access pageData withi ...

Hey there, I've been struggling with importing inline SVGs into my Nuxt3 Vite project. Any advice would be greatly appreciated. I discovered that using <img src="~/assets/images/icons/push-icon-chatops.svg" /> works, but I actually need an ...

I'm currently working on developing a component that allows me to dynamically import icons based on the provided icon name using unplugin-icons. However, I'm facing an issue where dynamic imports don't seem to work when the import path is dynamic. Interest ...

Looking to dive into the world of Nuxt3. As far as I know, it employs universal rendering, blending elements of CSR and SSR. But before embarking on this journey, a couple of queries are on my mind. How does Nuxt3 differentiate between client-side and s ...

I am looking to capture the referrer header and store it in a cookie so that I can later use it to populate an axios request during the user's journey on my website. In my app.vue, I currently have the following code snippet: const headers = useRequestHea ...

After creating a Nuxt3 in static mode, I want to preview it without having to push it to Netlify every time. My nuxt.config.js remains unchanged: import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ }) However, when trying yarn gene ...