Questions tagged [nuxt.js]
Nuxt.js offers a platform for developing Vue.js applications with the flexibility to select from Universal, Static Generated, or Single Page application options (similar to Next.js).
Has anyone successfully sent assets from an npm package to a nuxt application before? I have a vue component within an npm package with the following structure: -src/ -assets/ -noun-filter.svg In this npm package, the vector image is included in the v ...
I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial price. I have an ...
Apologies if this question has been asked before, but I'm unsure of what terms to search for. Is there a method for altering the template utilized to create the index.html file while constructing a Nuxt app in spa mode? ...
I have successfully implemented a slot for the header in vue-bootstrap, allowing me to add a show and hide button with a search box in each column header. The header is placed within a slot and the fields data includes a showFilter property that toggles be ...
I am working on a code snippet that fetches data from my Sanity CMS. My goal is to utilize the useSeoMeta function so that the title corresponds to the title retrieved from Sanity's Data. const { data } = useAsyncData('category', () => sa ...
In my Vue.js + Nuxt.js component, I have implemented a head() method: <script> export default { name: 'my-page', head() { return { title: `${this.currentPage}` }; }, ... } </script> The valu ...
I have been working on a slider with a modal that should open when an image is clicked. The modal state is stored in my Vuex store, and I need to dispatch an action from the image tag within my render function. While following Vue documentation, I have at ...
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 ...
Dealing with a peculiar problem where "val" and "ok" can be used within "console.log()", but for some reason, state.user cannot be assigned any value. However, state.user does display 'ok' on the website. export const state = () => ({ user: 'ok' }) e ...
While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...
I recently set up a new Nuxt project by using the command: vue init nuxt/starter <project-name> After creating my project, I made changes to the nuxt.config.js file by including the following code: css: [ { src: '~assets/css/style.css', lan ...
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 ...
I am currently working on a Nuxt project that is functioning properly. However, there is an async method that runs during the page loading process. import charge from '~plugins/charge' export default { asyncData (context, callback) { const sub ...
Whenever I attempt to remove an element from an array, I encounter a peculiar issue. After making three posts and attempting to delete them, the last remaining post is often one that has already been deleted - until I refresh the page. <tr class="b ...
Struggling to get my NuxtJS app functioning properly on IE11. Despite multiple attempts to configure Babel for compatibility, spread operators are still present in the built pages files, suggesting that Nuxt code is not being transformed correctly. Below ...
Looking to incorporate Vue Testing Library into my Nuxt.js project. Encountered an error right after installation, where running a test results in the following message: 'vue-cli-service' is not recognized as an internal or external command, operable pro ...
this piece of code is designed for a component that allows users to jump back to the top of the page. However, after refreshing the page, it stops working and throws an error. The project uses the Nuxt and Vue framework. Can anyone identify the reason behi ...
Here is my custom v-data-table wrapper component: <template> <v-data-table v-model="selected" :headers="headers" :items="remappedItems" :page="state.currentPage" :items-per-page="s ...
I've been exploring ways to implement authentication on my Nuxt app, but I'm struggling to find a tutorial that doesn't rely on redirecting to public or private paths. For example: if (user.isLoggedIn()) { redirect('/dashboard') } else { redirect ...
I'm starting to explore nuxt + express. I have the code from this link: https://github.com/nuxt/express, and it's working well with npm run dev. Now, I want to debug the API code. Inside users.js: import { Router } from 'express' var router = Router() ...
I've been working on implementing CSP headers for my website to ensure data is loaded from trusted sources. However, I'm facing an issue where CSP is blocking my local JS files. Here's a snippet from my nuxt.config.js: const self = 'lo ...
I have recently installed the vue-flip plugin in a NuxtJs (VueJS) project that I created using the command: npx create-nuxt-app <project-name>. In the index.vue file, I simply added: <vue-flip active-click="true"> <div slot="front"> ...
I have a unique component that I am working with. It consists of various elements like modals, templates, and algolia search integration. <template> <div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelled ...
Is it possible to modify the .env and the created nuxt app in order to detect any modifications, allowing for distinct variables for each server? ...
Recently, I completed a blogging project in Nuxt where I utilized the quill text editor for managing content in the description field of my database. However, upon trying to display the blog post's description from the database using v-html, I encountered ...
Struggling with a realtimeDB issue while using NuxtJS to manage state and send it to the DB. Saving data works fine, but editing results in a 400 BAD Request error. This error also occurs when trying to manually update information within Firebase realtime ...
Form Structure: <card-wrapper v-for="(passenger, index) in form.passenger" :key="index" :icon="['fas', 'user']" :title="`Passenger ${index + 1}`" class="mb-5" > <validation-observer ...
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 am seeking guidance on a matter that I have not been able to find a clear answer to. Webapck typically uses the ~ symbol as an alias for the root directory. However, I have noticed that some developers use the @ symbol when importing modules using ES6 s ...
I am interested in creating two local endpoints like the ones below: strategies: { localOne: { endpoints: { login: { url: "token/", method: "post", propertyName: "access" }, user: { url: "user/me/", method: "get", propertyName: false }, ...
We have developed a Nuxt.js multi-tenancy website where we need to fetch environment variables based on the domain. We have 5 domains listed below: Note: The source code is the same for all domains. test1.com test2.com test3.com test4.com test5.com When ...
Trying to create a dynamic form component that can utilize different v-models for requesting data. Component: <v-form> <v-container> <v-row> <v-col cols="12" md="4"> <v ...
I am relatively new to using nuxt and currently working on my first website with it. I encountered an error that I am struggling to resolve. My WSL Ubuntu development environment was functioning properly until I mistakenly ran npm run build instead of npm ...
Currently, I am working with a basic Nuxt.js application and I am curious to know if it is feasible to compile the output into a single file, combining all the .js and .css files altogether? I came across a solution for achieving this using just Vue.js as ...
According to the guidelines provided by Nuxt documentation, you have the ability to customize the default document by... placing an app.html file in the source directory of your project, which is typically the root directory. I followed these instructio ...
I'm new to VueJS and NuxtJS, and I'm having trouble passing a property from a layout to a page component. Below is my layouts/default.vue <template> <Nuxt myprop="hello world" /> </template> <script> export default { ...
I am encountering an issue in my vue-app where I need to make a <nuxt-img /> clickable. I attempted to achieve this by using the following code: <nuxt-img :src="image.src" @click="isClickable ? doSomeStuff : null" /> Howeve ...
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 ...
Within my Vue page, there are three distinct input fields: <input id="id" class="flex-grow bg-white p-4 text-sm items-center focus:outline-none" type="text" name="id" v-model="id" placeholder ...
I have been attempting to deploy this Nuxt.js application on Heroku in universal mode. Following the necessary steps like "npm run build" and "npm run start" for production mode, everything seemed to be working smoothly. Next, I executed the following co ...
Currently, I am using Vuetify v2 and planning to switch all my nuxt-link elements to <a href></a>. This leads me to wonder what should be done about the Vuetify to prop - should I leave them as they are or also change them to anchors? <tem ...
Seeking help to seamlessly integrate an express app generated with express generator into my nuxt.js application. Came across this https://github.com/nuxt-community/express-template, although it seems to only cover basic express applications. Any recomme ...
Within the static folder of my nuxtjs application, there exists a file named data.json Utilizing this data within my component is done as follows: <script> import data from '~/static/data.json'; export default { data ({ params }) { retu ...
Hello, I am facing an issue where I need to pass parameters in the URL to another page in NuxtJs props: { idPending: { type: Number, required: true } }, methods: { fetchpage() { const orderId = this.idPending; this.$rou ...
Issue with Importing Vue File in Storybook I am facing an issue while trying to import a vue file (component/index.vue) into my storybook file (component/index.stories.ts). The compilation is failing and the import cannot be completed. component/index.st ...
After successfully deploying my site on AWS using nuxt generate with dynamic routes, I encountered an issue. I wanted to add a new route without having to go through the entire deployment process again. For example: /post/1 /post/2 /post/3 ------- alread ...
Overview In my previous work, I combined frontend development with nuxt and backend support from elixir/phoenix, along with nginx for reverse proxy. Looking to enhance the performance of the system, my goal is now to migrate everything to Elixir/Phoenix. ...
Recently delving into Vue and Nuxt, I have been grappling with a query surrounding asynchronous requests. My understanding so far is that utilizing asyncData along with axios in Nuxt allows for fetching data that can be showcased on the frontend. However, ...
Working on developing a web app with Vue and Azure App Service on Linux has been successful locally. However, encountering a "Service Unavailable" error when attempting to build it on the server. The project is utilizing NUXT, with the port currently set ...
I am attempting to launch Nuxt programmatically from my Express server, but I encounter errors once the application is compiled and I check my browser console: https://i.stack.imgur.com/MZxHk.png https://i.stack.imgur.com/sfDIF.png This is how my nuxt.c ...
I have encountered an error while using the node-rsa library in my NuxtJS project. During the production build process with nuxt build, which includes JS and CSS minification by default, I receive the following message right before the build breaks: ERROR ...
Currently, I am implementing Sass into my project. I have successfully installed "node-sass" and "sass-loader", allowing me to utilize imports, variables, and other features of Sass. However, I am encountering an issue with using "@use" to employ a @mixin ...
After setting up my Nuxt app to load a link and its child view on the route http://127.0.0.1/user/:id, I encountered an issue with API calls for the user not triggering properly due to changes in the id parameter. Initially, I had placed the API calls in ...
In my vue/vuetify project, I have a sparkline component that displays bars representing values. I am looking to change the color of bars with values less than 0 to red. Here is a snapshot of what I have: https://i.stack.imgur.com/YvpFB.png Below is a simp ...
Working on creating a form using the v-for syntax. I have successfully managed to retrieve percentage data from the child component by simply specifying the method name. Parent Component <div v-for="(item, idx) in recipients" :key="idx"> < ...
https://i.stack.imgur.com/7skBL.png Within the _collection.vue file, there is a structure like this: <div> This represents a collection <NuxtChild /> </div> In the category > index.vue file, the content is as follows: <div&g ...
Running my website, I aim to achieve top-notch performance scores using LightHouse. I have successfully cached all the images I created (Cache-Control: public, max-age=31536000). Unfortunately, third-party website images are not cached. How can I cache t ...
After successfully installing the module, I inserted the following code into the plugin folder: // uiv.js import 'bootstrap/dist/css/bootstrap.min.css' import Vue from 'vue' import * as uiv from 'uiv' Vue.use(uiv) I am ...
I've seen some similar questions, but none of the solutions have worked for me so here's my issue. I'm attempting to integrate jsPlumb into my Nuxt.js/Vue.js application. Here are the steps I've taken: npm i jsplumb --save Create a new page in my Vue.js ...
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 ...
I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...
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 ...
Summary My Nuxt.js project was created using the command yarn create nuxt-app in SPA mode. However, I encountered an error after installing Storybook where running yarn dev resulted in failure to start the demo page. ERROR Failed to compile with 1 errors ...
Looking for a way to transfer data from the Data function to asyncData in Nuxt. I've attempted the following: data () { return { prevpage: null, nextpage: null, currentPage: 2, pageNumbers: [], pageNumberCount: 0 ...
Currently, I am working on developing a SSR Nuxt.js application that integrates with a REST API server. In order to achieve this, I have included my endpoint /api into the Nuxt server.js code as shown below: const express = require('express') c ...
I recently came across this interesting component that I am using: My current challenge involves properly passing a click event from one button to another and displaying a popup beneath the forwarded button. <script src="//unpkg.com/vue/dist/vue.js"&g ...
I've designed a unique custom cursor and I am looking to enhance its functionality by adjusting its scale dynamically during fast movements. Similar to the cursor on this website: Example.com Here is my custom cursor for reference: CodeSandBox What ...
In my Nuxt page, I have split it into two sections. The first section is a regular template structure that displays dynamic content based on the URL parameter. The second section consists of a component that needs to load based on this data. I've attempted ...
Just imported a Nuxt project from GitHub that includes the vercel.json config: { "version": 2, "builds": [ { "src": "nuxt.config.js", "use": "@nuxtjs/vercel-builder" ...
I am looking to measure my v-img like the one shown in the image below. https://i.stack.imgur.com/edMKr.jpg Does anyone know how I can achieve something similar to the image shown using vuetify's v-img. <div class="row"> <v-img ...
I've encountered an issue with my Nuxt app when deploying it to Netlify. After running yarn generate automatically, I noticed some strange CSS behavior in production. Specifically, there is a hover effect on a card that seems to be working fine local ...
I am looking to integrate Amazon Native Shopping Ad onto my website. Here is an example of the Ad code structure: <script type="text/javascript"> amzn_assoc_tracking_id = "xxxxxxx"; amzn_assoc_ad_mode = "manual"; amzn_as ...
As I am delving into the world of Vuex store used with vue.js, I find myself wanting to implement it in a specific scenario. 1. Is STATE referring to any data, whether static or dynamic, that is provided by the server or stored in a JSON format? TEMPLATE ...
My current setup involves Nuxt with php-express, and I've been troubleshooting a persistent error in my php script for hours without success. *server.cjs : * const express = require("express"); const expressPhp = require("express-php") ...
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 ...