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).
I've been grappling with this issue for the past three days without any luck in finding a solution. My Nuxt.js frontend relies on the auth module to acquire a JWT token from a DRF backend. Upon logging in, the server returns the following message: Forbidd ...
The concept Imagine having a main Nuxt website just like any other. Now, think about adding my module to your project. This module will then introduce a subdomain "admin.example.com" to your project, creating a fully functional Nuxt-based website that ope ...
After reinstalling node_modules, I encountered an issue where ufo and node-fetch were missing. Upon adding them back in, running npm run dev resulted in an error when opening localhost in a browser. This same error persisted when cloning the project onto ...
Is it possible to integrate Mixpanel analytics into Nuxt.js? Although I am new to Nuxt.js, Vue, and Mixpanel, the website I have inherited is performing well so I prefer to learn how to incorporate Mixpanel rather than make drastic changes. Adding Google ...
I've been attempting to set up an "Accept-Language" header for my SPA using vue.js (along with nuxt). Here's the approach I took, but unfortunately, it's not functioning properly. I specified that I am utilizing the axios module for nuxt. I followed the ...
Seeking advice on displaying images from a gallery page sourced from Strapi. Previous methods have not been effective in my case. My dynamic gallery page successfully retrieves collections from Strapi, but I'm struggling to showcase the images correc ...
Find the code on github: https://github.com/aurora10/amazone-clone.git Attempting to use Axios to communicate with an API is resulting in the following error: The console shows a NUXT SSR error: TypeError: Cannot read property '$get' of undefined at asy ...
Having trouble running a code on my pages/posts/index.vue page where I keep getting an error message 'Unexpected setTimeout in asyncData'. Can anyone provide assistance in understanding this error and suggest if any additional plugins are needed? <tem ...
Could anyone help me figure out how to remove the trailing slash at the end of routes in Nuxtjs? I attempted using the @nuxtjs redirect-module and setting the trailingSlash property to false, but instead of removing the slash, it adds multiple slashes at ...
I am new to using Vue JS and trying to run a sketch on the canvas element in Nuxt JS, but encountering some issues. While there are no errors in VS Code, there is an error showing up in the browser console: client.js?06a0:84 TypeError: Cannot read propert ...
Having trouble displaying a value inside a div tag in my nuxt app. An error message keeps popping up saying "Cannot read property 'free_funds' of undefined. Still getting the hang of Axios and Nuxt. Could it be that Bootstrap requires JQuery to update da ...
Utilizing the module https://www.npmjs.com/package/csurf to safeguard my public routes from cross-site request forgery. Due to the server and client being on separate domains, a direct method of passing the generated token to the client is not feasible. I ...
I am currently working on a project using Vue and Nuxt.js. I am wondering if there is a way to cache an axios web service call for all clients. Specifically, I need to retrieve currency reference data and it seems inefficient for every client to make this ...
I am working on a small web application that mimics the appearance of FaceTime. My goal is to switch between video elements by clicking a "Next" button, which will update a value in Vuex and swap out the video accordingly. I initially attempted this appr ...
I'm having issues getting syntax highlighter to work with @nuxt/content and Shiki. Once I installed the shiki package in my project's nuxt.config.js file. import shiki from 'shiki' ... export default { modules: ['@nuxt/content ...
I am trying to utilize the router /foo-:bar in Nuxt. Do you have any suggestions on how I could make this work? I attempted using pages/foo-_bar.vue but it did not yield the desired results. ...
I'm facing an issue where my element styling doesn't seem to work when using the scoped attribute. Upon inspecting the element, it appears that the styling is not being applied when using scoped. The reason I need to use scoped is because I want the stylin ...
Within my index.js file in the 'store' section, I am encountering the following code: import Vuex from 'vuex' // import axios from 'axios' const createStore = () => { return new Vuex.Store({ state: { loadedPost ...
I have been exploring the power of store actions in nuxt.js and I recently organized all my global methods and computed properties into a global mixin. Within this setup, I realized that I have numerous Axios requests fetching different products. Should I ...
Currently, I am in the process of adding a unit test to a Nuxt application using Jest and Sinon for stubbing functions. My main goal is to stub Axios get calls. Here's how I create an instance: return shallowMount(BarChart, { stubs: { highcharts: tr ...
Having a Nuxt3 application, I encounter an issue where a blog article fetched from Firestore using a path variable ID is not populating the title and meta tags (<Title> and <Meta>) in time for SEO optimization. Despite setting SSR to true and p ...
Encountering the following CORS error: Access to XMLHttpRequest at 'https://gw.bilinfo.net/listingapi/api/export' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass acce ...
Hey everyone, currently I'm utilizing Nuxt I have an image saved on the server as a blob that I want to display on the client side This is how my Component is structured: <template> <div class="product-page"> <div clas ...
I am facing an issue where I need to fetch remote data and display it on multiple pages. The network call is being made in the store/index.js file: export const state = () => ({ contact: { hello: "World" } }); export const actions = { async ...
I've integrated vue-router into my nuxt project, but I encountered an issue when running npm run generate - it generates everything except for my pages. I suspect the problem lies with the router implementation as I didn't face any issues before incorporat ...
When working with Nuxt.js, I am trying to keep track of the value associated with a key called key1 in the $route.params. The values for key1 are determined using a function called someFunction(). Is there a way for me to monitor $route.params.key1 as a ...
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' ...
Just starting out with VueJs and working with wizaplace. I currently have a route set up as /breweries/:id, which uses the company's ID to fetch information from the wizaplace API. Within this data, there is a slug that I would like to display in the URL ...
Is there a way to prevent the Toast from closing when the Modal is closed in BootstrapVue? Here's the scenario: Open both the Modal and Toast on the page Close the Modal Notice that both the Modal and Toast close simultaneously Question: How can ...
Hello! I am currently navigating the world of Nuxt.js and Vuetify, and I have a question about adding URL links to image tags. Essentially, I want users to be able to click on an image and be directed to another page via a designated link. About My Page L ...
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 recently delved into Vue/Nuxt programming and worked through a tutorial on adding a blog, which I then customized for my website. Everything functions perfectly except that the content is rendering twice. It goes from rendering NavPage (component) > cont ...
I am looking to create 20 expansion panels using a v-for loop to display the categories fetched from my JSON in each panel header. Additionally, I want to populate each expansion panel's content with the corresponding names retrieved from allItems data. Ho ...
I am facing an issue where I have multiple npm packages containing client-side scripts that I need to include in different pages of my Nuxt.js project. I attempted to achieve this by using the following method: <script> export default { head: { ...
Within my Nuxtjs project, I have implemented a process in which I encrypt requests before they are sent to my Laravel API. Once the response is received, I decrypt it using specific global functions that have been defined... function encryptDataLa ...
I'm in the process of developing a Nuxt application using TypeScript and intend to conduct unit testing with AVA. Nonetheless, upon attempting to run a test, I encounter the following error message: ✖ No test files were found The @nuxt/typescrip ...
I need to implement a filter function for my fetched json data using buttons. When a button is clicked, only the data (in this case book names) that match the clicked button should be displayed while hiding the others until another button is clicked. The ...
I need to incorporate this script into my Nuxt code: <script> tinymce.init({ selector: "#mytextarea", plugins: "emoticons", toolbar: "emoticons", toolbar_location: "bottom", menubar: false ...
I am attempting to utilize the library found here: https://github.com/rigor789/vue-scrollto However, I am encountering difficulties with utilizing it and the provided instructions are not very clear. The instructions state that I should do the following: ...
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 ...
Currently, I am utilizing nuxt in conjunction with apollo-module. My main objective is to be able to intercept any potential network errors, specifically 401/403 errors, in order to display an error modal and log out the user. As per the documentation, it ...
During the development of my blog, I have been utilizing Quill as my primary TextEditor through this GitHub link. However, upon transitioning from vue3 to nuxt for SSR (Server-Side Rendering), I encountered an issue related to the compatibility between q ...
I am currently facing an issue with passing data into nuxt-link. Whenever I click on the link, nuxt-link returns a 404 error and fails to load the file. However, the other two links that use :href and hardcoding seem to be working fine. <template> ...
While creating a VUE 2 app with NUXT, I encountered an issue where my async method successfully retrieves data but the v-for loop does not generate any HTML markup. The data retrieved from my node.js API via Postman is as follows: { "status": true, ...
Trying to generate static page templates using Vue/Nuxt but struggling to find a way to insert a very specific tag into the head section of each generated page. It's not a meta, script, style, or link tag, and it appears that the options in nuxt.confi ...
In my Nuxt.js project, I have incorporated the axios module. The baseUrl for my API is set to 'localhost:4040/api', while my client is functioning on port 3000. However, when retrieving image data from the API, it outputs a relative path to the server like ...
Currently, I'm developing a search feature that takes the value from a select box and sends the user to the appropriate page. However, there seems to be an issue where the wrong template is being called upon rendering, resulting in no content being display ...
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/ ...
In the following code, the objective is to update a data variable called sticky to true if the scroll position is greater than 0. export default { components: { }, data() { return { menuVisible: false, sticky: false, } }, mou ...
I have successfully set the session using code on Postman. First: I set my session and it is functioning properly. const user = { name: 'afshin', }; req.session.user = user; res.status(200).send({data:req.session.user,status:200}); Second: Now, when I ...
I've set up a new nuxt project and when I attempt to run it using the npm run dev or yarn dev command, I encounter this error: build [================== ] 91%Error: getaddrinfo ENOTFOUND localhost at errnoException (dns.js:50:10) at Get ...
After setting up a SSR/progressive nuxt project using create-nuxt-app, I encountered an issue with HTTP requests being made from my two pages to a backend API. These requests are initiated from the async asyncData(ctx) method in my nuxt page. Strangely, w ...
I am looking to implement translated error messages for Vuetify validation failures Template section <v-text-field v-model="message.name" outlined :label="$t('page.contact.form.name')" :rules=nameValidationRules > ...
I'm currently developing an app using nuxt, vuetify 2, and typescript. Within the app, I have radio buttons (referred to as b1 and b2) and text fields (referred to as t1, t2, t3). When a user clicks on b1, it displays t1 and t3. On the other hand, w ...
I have a data() object in my Maincomponent.vue. Inside the data(), there is an array named myDatabase that contains multiple objects. My goal is to utilize methods to access the fields within myDatabase. I am looking to create functionality to toggle the ...
Setting up an online store. I began with the products, which can be pulled without authorization but require it for editing. The process is smooth so far, probably because it's happening on the client side where authentication information is included in al ...
I recently followed a tutorial on creating an app using VueJS cli and now I want to deploy it on gh-pages. After generating the dist folder with the yarn generate command, I referred to a deployment guide to publish the app. However, when I visit the dep ...
I am looking to capitalize the input data from the user's full name model and would prefer if it is in Latin letters only. Utilizing Vue.js for Uppercase Conversion <p-input :value="value" @input="$emit('input', $event)" /> < ...
When watching a property from Vuex, I use the following approach: computed: { ticket() { return this.$store.getters['order/reservation'].offer_id } }, watch: { ticket(newTicketId) { console.log('Caught change of ...
I am currently working on developing static pages with Nuxt.js (MPA). After executing the generate command, I noticed that all the URLs in the <nuxt-link> tag start from the root directory, specifically /. For instance, my project structure looks lik ...
I am experiencing an issue with my Vue3 template file that is fetching data from Strapi. While it works fine on my local machine, the content only loads correctly on the first page load when I run it online. Subsequent page changes do not update the cont ...
Here's the configuration I'm using for nuxt-auth-next in my Nuxt application: nuxt.config.js auth: { strategies:{ google: { clientId: "my_client_id.apps.googleusercontent.com", redirectUri: `http://localhost:3000/apps`, ...
I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...
With the Nuxt module called nuxt-robots, how can I set up multiple disallow rules per user agent? Currently, my configuration looks like this: robots: () => { return { UserAgent: '*', Disallow: '/search/', Si ...
Looking to add a header in my Nuxt application within Nuxt/layouts/default.vue <template> <div> <Navigation/> <Nuxt /> </div> </template> But the code: <template> <Nuxt /> </template> ...
Hey there, I recently added an image to the assets folder and after running npm run dev, my page is not displaying the image. You can check out the image https://i.stack.imgur.com/EczEy.png Here's my code: <div :style="{ backgroundImage: `url( ...
Looking for a solution in Nuxt/Vue to properly execute an external script (hosted by a third party) after the DOM has successfully rerendered on every route. The challenge arises when using a script that dynamically adds elements to the dom, causing confl ...
I am new to Nuxt or any type of node technology. I am attempting to create different environments for various scenarios. For example, if I want to test my app, I would like the dev object block to run (pointing to a dev endpoint). Here is an example: [ p ...
I am currently facing an issue while trying to add an environment variable inside the .env file in my Nuxt project. The version of Nuxt.js I am using is 2.15.3 Below is a snippet from my nuxt.config.js: export default { publicRuntimeConfig: { baseU ...
After upgrading Nuxt in my project using the command npx nuxi upgrade, I encountered an issue while running eslint .. The output displayed a warning regarding the TypeScript version: ============= WARNING: You are currently running a version of TypeScript ...
In my Nuxt project, I have implemented a custom plugin file that contains an object with settings called /helpers/settings: export const settings = { baseURL: 'https://my-site.com', ... }; This file is then imported and registered in /plugi ...
To implement a truly dynamic single page component, we can utilize the component tag like this: <component v-bind:is="componentName" :prop="someProperty"/> ... import DynamicComponent from '@/components/DynamicComponent.vue'; ... components: { ...
I'm having trouble displaying the property of an associative object array in my code. I attempted to utilize a v-for loop and wanted to showcase the property information within the td elements of a tbody. I am aware that v-data-table components have a ...
Exploring NuxtJs is new to me. I decided to experiment with how nuxt-link functions by purposely setting up a nuxt-link to a non-existent route in order to trigger the default 404 page. Here's the line of code I added to the pages/index.vue file: <nuxt- ...
Stack Overflow utilizes a URL structure of stackoverflow.com/questions/{question ID}/{question title}. If you happen to misspell the {question title}, you will be redirected permanently with a 301 status code to the correct URL, provided that you have the ...