In Nuxt 2, a layouts/error.vue component is used. I tried with Nuxt 3 but it didn't work out.
I can not find it in the documentation (https://v3.nuxtjs.org/guide/directory-structure/pages, https://v3.nuxtjs.org/guide/directory-structure/layouts)
Any ideas ?
SPA
Writing an error.vue-file inside the root-folder works and the error object can be passed as prop to this component. The object as the following type:
error: {
url: string;
statusCode: string;
statusMessage: string;
message: string;
description: string;
data: any;
}
Multiple pages
Create a 404.vue-file inside the root-folder
Related
I am trying to go through a tutorial (link below) to learn vue and firebase. There is a main dashboard page with a list of components, and I have gotten that to display a list of employees. Then there is a view employee component. When I started to build that, and just loaded data, I started getting this error:
Uncaught FirebaseError {code: "app/duplicate-app", message: "Firebase:
Firebase App named '[DEFAULT]' already exists (app/duplicate-app).",
name: "[DEFAULT]", stack: "[DEFAULT]: Firebase: Firebase App named
'[DEFAULT]…0)↵ at fn (http://localhost:8081/app.js:89:20)"}
The firebase code I added to view employee is as follows:
import db from "./firebaseInit.js";
export default {
name: "view-employee",
data() {
return {
employee_id: null,
name: null,
dept: null,
position: null
};
},
beforeRouteEnter(to, from, next) {
db
.collection("employees")
.where("employee_id", "==", to.params.employee_id),
get().then(querySnapShot => {
querySnapShot.forEach(doc => {
next(vm => {
vm.employee_id = doc.data().employee_id
vm.name = doc.data().name
vm.dept = doc.data().dept
vm.position = doc.data().position
})
});
});
}
};
When I comment out this script on the view employee page, the error goes away. From what I can tell, I have done everything the same as the tutorial in the video, and as my buddy who did the same project.
There is also a warning, which may be related, which states as follows:
There are multiple modules with names that only differ in casing. This
can lead to unexpected behavior when compiling on a filesystem with
other case-semantic. Use equal casing. Compare these module
identifiers: *
/Users/jdurell/code/employeemanager/node_modules/babel-loader/lib/index.js!/Users/jdurell/code/employeemanager/src/components/FirebaseInit.js
I am working on this tutorial / project:
https://www.youtube.com/watch?v=cjEzK4me1k8&index=4&list=PLillGF-RfqbYsOOycB67Raf9dwmL6Y31M
Nemesv had the correct answer. It was a casing issue. I had the issue FirebaseInit on the other component. I changed that to firebaseInit so it was the same case on both components, and the error resolved. Thanks!
I'm trying to do something like this:
User:
type: "object"
properties:
id:
type: "integer"
format: "int64"
name:
type: "string"
manager:
$ref: "/definitions/User"
Editor does not throw an exception, but the code generated according to this schema does not work at all.
I generated python-flask server, and on launch, it throws:
ImportError: cannot import name 'User'
Looking through the code I found that 'User' class uses 'User' keyword in __init__ and inside the class.
Also there was the import: from swagger_server.models.user import User
Does python-flask generator know how to implement references like this?
Version of Vue: 2.4.2
Version of webpack: 2.6.1
The task is... I have a component. It gets global variable, a string. And depends on this variable it should dynamically load and show one of seven quite heavy components. It seems to me that it's not a good idea to import it all because of their weight.
Now I've made import like this:
import comp1 from '#/components/comp1.vue';
import comp2 from '#/components/comp2.vue';
export default {
components: {comp1, comp2}
...
}
In the template we'll use it like <comp1></comp1> And this is not what I want. The output file is pretty big and I must move on.
I've tried made like this described in docs:
export default {
components: {comp1: () => import('#/components/comp1.vue')}
...
}
A-a-and we have an error:
[Vue warn]: Failed to resolve async component: function comp1() {
return __webpack_require__.e/* import() */(1).then(__webpack_require__.bind(null, 37));
}
Reason: Error: Loading chunk 1 failed.
The initial idea was:
let param = window.GLOBAL_PARAM;
let str = '#/components/comp2.vue';
switch(param) {
case 1: {
str = '#/components/comp1.vue';
break;
}
case 2: {
str = '#/components/comp3.vue';
break;
}
...
}
export default {
components: {comp: () => import(str)}
...
}
But I've got an error:
[Vue warn]: Failed to resolve async component: function comp() {
return __webpack_require__(50)(componentPath);
}
Reason: Error: Cannot find module '#/components/comp2.vue'.
As I understand, I have a problem with webpack, which can't resolve "#" symbol
So, the questions are:
How should I fix up async loading off my components? Maybe I've made a
sad mistake in my code?
How should I organize by the right way the loading one of the seven components depending on some condition (global variable or param in component). Maybe there are some webpack preferences and/or some plugins. Or maybe I should resole this problem by the other approach?
I've developed some google flex endpoints. They work locally but when I deploy the app (gcloud app deploy) I get a http status 403 forbidden. I'm using ajax to call the endpoint like this:
var echoEndpoint = function() {
$.ajax(userBaseUrl+'/echo', {
headers: {'Authorization': 'Bearer ' + userIdToken},
type: 'GET',
data: "key=my special key"
})
}
I'm protecting the endpoint with an apikey and passing the userIdToken in the header. The above code produces the 403 forbidden. But if I remove the header it works. albeit no user token. Here is the code that will NOT produce the 403
var echoEndpoint = function() {
$.ajax(userBaseUrl+'/echo', {
type: 'GET',
data: "key=my special key"
})
}
here is my paths section of my openapi.yaml
.....
paths:
"/echo":
get:
description: "Echo a test message."
operationId: "echo"
produces:
- "application/json"
responses:
200:
description: "Echo"
schema:
$ref: "#/definitions/echoMessage"
x-security:
- firebase:
audiences:
- "my project-id"
....
definitions:
echoMessage:
properties:
message:
type: "string"
Do I need to specify in my openapi.yaml that I'm sending a header in the request? If so how and where? I tried to put it in the definitions section but that yields a INVALID_ARGUMENT error when trying to deploy.
Did you define "firebase" in "securityDefinitions" as shown in this example (https://github.com/GoogleCloudPlatform/python-docs-samples/blob/master/appengine/flexible/endpoints/openapi.yaml#L108"?
I'm learning Meteor by following this tutorial.
Here is my git https://github.com/nicholaschong12/meteor-slackclone
I'm getting this error:
Uncaught TypeError: Cannot read property 'channel' of undefined
Uncaught TypeError: Function.prototype.apply: Arguments list has wrong
type
Meteor.startup(function(){
Session.set('channel',this.params.channel);
});
Please help me to understand this error.
Thank You
Looking at the error:
Uncaught TypeError: Cannot read property 'channel' of undefined
We can see that it is trying to read a property 'channel' of an undefined object. This object from your code is:
this.params
Reading the iron:router docs, tells us that:
When a user goes to that url, the actual value of the parameter will be stored as a property on this.params in your route function.
However in the code snippet you provided:
Meteor.startup(function(){
Session.set('channel',this.params.channel);
});
You are trying to access this.params inside a Meteor.startup callback function, not a Router.route function. In this context this.params is undefined, as the error is telling you.
Change your startup code to match the tutorial:
Meteor.startup(function() {
Session.set('channel', 'general');
});
And in your routing code you can use values from the route like this:
Router.route('/:channel', function () {
Session.set('channel', this.params.channel);
this.render('messages');
});
In this context this.params will return an object, including the channel property defined in the routes path.