Switch from using Vue.js to Nuxt.js for improved functionalities and performance

I need to modify the following vue.js code snippet. Here is the original code:

computed: {
  ...mapGetters('user/auth', ['Id']),
},
async mounted() {
  await this.doFetchCustomer(this.Id)
},

methods: {
  async doFetchCustomer(Id) {
    const app = { $axios: this.$axios }
    const datas = (await customerApi.getData(app, Id)) || []
    console.log(datas)
  },
},

I attempted to convert this code to use nuxt's asyncData, but my solution below did not work. How can I properly transform it?

computed: {
  ...mapGetters('user/auth', ['Id'])
},
async asyncData({$axios}) {
  const datas = (await customerApi.getData($axios, this.Id )) || [];
  console.log(datas);
  return {datas}
}

Answer №1

It seems that your component is not a page component since asyncData is not being called.

According to the requirements in the Nuxt docs:

The asyncData hook should only be placed on page components.

If you are working with different types of components, you can use the fetch hook instead:

export default {
  data() {
    return {
      datas: null
    }
  },
  async fetch() {
    this.datas = (await customerApi.getData(this.$axios, this.Id)) || [];
  },
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript encountered an issue while parsing XML: the format is not well-formed

I keep seeing an error message saying "Error parsing XML: not well-formed" when I encounter this line in my javascript code: for (var i=1; i<=totalImgs; i++) If I remove the < character from the line, the parsing error goes away. However, the javas ...

Adjust camera view according to the rotation in three.js

I am in the process of creating a demonstration, and I'm facing an issue with moving the camera in my scene in the direction it is pointing. The concept is similar to pointer lock controls, but I need the camera to have the ability to move up, down, f ...

The appearance of the CSS style differs between the development and distribution environments

My Vue.js project is experiencing a difference in CSS styles between the development environment and the distribution environment. Here is the effect in the development environment: https://i.sstatic.net/vyfl7.jpg And here is the effect in the distribut ...

Troubleshooting issue: Dexie.js query using .equals not functioning properly in conjunction with localStorage

I am attempting to retrieve a value from indexedDB using Dexie.js, but it seems that the value stored in localStorage is not being recognized. I have tried various methods including async/await, promises, placing the localStorage call in created, mounted, ...

Securing multiple routes in AngularJS using resolve for authentication

How can I authenticate users for all routes in my application without having to specify it individually? Is there a global way to handle authentication for all routes, so that I don't have to include the following code on each $routeProvider.when() c ...

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Referring to this discussion on Stack Overflow: AngularJS trigger and watch object value change in service from controller The original question was about watching for changes in a service from a controller. I am interested in extending this concept to ...

Names changes and deletion of files that have been uploaded- Using Vue.js

I attempted to use v-model in order to rename files before uploading them to the system, but unfortunately, it was not successful. As a result, I developed an alternative solution which is functioning perfectly, except for the fact that I am unable to reta ...

Take away limitations from JavaScript code

I stumbled upon this code snippet online and I'm attempting to eliminate the Name must be letters only and min 3 and max 20 restriction. The name provided can have less than 3 characters and may include numbers. My JavaScript skills are still in the l ...

I’m keen on utilizing JQuery with Node.js and EJS, but I’m encountering an issue where $ is not

I attempted to incorporate JQuery in my project by following these steps. Installed jquery using npm install Modified the package.json file Despite this, the functionality still does not work as intended. Below is a snippet of the .ejs page: <html& ...

Issue with setTimeout() function not being triggered within a VueJS method

I am currently developing an application that allows a user to reset or shutdown a particular server. I am focused on creating the interface and ensuring that the user receives appropriate messages about the actions being taken. My approach involves displa ...

What is the best method for establishing communication between a Firebase service worker and a Vue/Vuex web application?

Our Vue application is currently using a firebase service worker alongside it. The service worker setup is as follows: // main.js import firebase from 'firebase/app' import 'firebase/messaging' ... const firebase_config = { apiKey ...

Determining if an element corresponds to a By-object in Selenium using JavaScript

Is it possible to determine if a given WebElement matches a specific By object? The function should return either true or false. For example: foo(myWebElement, By.className("myClass myClass2")); foo(myWebElement, By.css("div")); foo(my ...

How can I incorporate Vue draggable feature in my project using cards?

I've been attempting to integrate vuedraggable with Vuetify Cards, but I'm facing an issue where the drag and drop functionality doesn't seem to work when the cards are in a single row. Interestingly, it works perfectly fine when they are di ...

Showcasing pictures on ReactJS

I am currently working on developing an application to showcase images on my React webpage. These images have already been uploaded to a local folder. In order to integrate my React application with a NodeJS server and MongoDB, I connected the two. My goa ...

Exploring the capabilities of Firebase functions within a Vue.js environment

I've been working on unit testing my Vue components, but it's posing challenges due to the integration with Firebase. To address this issue, I decided to set up a dedicated folder named __mocks__ for storing all my mocked functions. Within this f ...

showing console logs before initializing preferences may lead to inaccurate results

My Content Management System (CMS) is WordPress. Recently, after making some changes, I encountered an error on a specific page: An error occurred: loading pref showConsoleLogs before prefs were initialised, leading to incorrect results being displayed - ...

Angular XOR operation between two strings

I need to perform XOR operation on two strings and I found a python implementation for it: def sxor(s1,s2): return ''.join(chr(ord(a) ^ ord(b)) for a,b in zip(s1,s2)) In the code above, a for loop is used to iterate over the strings and ...

Is there a way to utilize variables from a source XML file to establish points on an SVG polygon?

I've been struggling to figure out if it's possible to dynamically set points on an SVG polygon using variables that are defined by an XML document which is constantly changing. All I want is to set the path like this: var polygonToUse = window. ...

Sending data from HTML and JavaScript to Python

In the process of developing a website that will operate on an embedded device, I am implementing an interface for users to engage with multiple functions on the site. These functions within the HTML interface will communicate with a Python script, which i ...

Transferring Python JSON object containing Japanese characters to JavaScript

My Python3 function generates a JSON object with the following structure: {'tags': {'releaseArtist': ['Shuichi Murakami', 'Nobu Caine', 'Electro Keyboard Orchestra', 'Mash', 'Loser', &a ...