My directory structure looks like that
/pages/request/guest/_slug/index.vue
If I call /request/guest/test-slug/ then Nuxt opens the index.vue file as expected.
But /request/guest/ without a slug also opens the same index.vue file.
Why is that? It should return an 404.
in index.vue you should check for route params and if there is no slug then return an error .
You can use validate props in your _slug/index.vue file to check if route.params.slug exists.
https://nuxtjs.org/api/pages-validate
otherwise it just show the index.vue
Related
I have a homepage which is paginated, though when clicking "Next Page" it seems to be looking for a page named /page/1. Is there a way to paginate the index.vue page without creating a brand new page?
I've currently implemented the following on #click.
this.$router.push({
path: '/' + this.page,
query: { },
})
You can have dynamic parameters.
For example
url.com/1
url.com/2
So if your home page is index.vue, you need to create a vue file next to it for a dynamic parameter with name after an underscore, for example _id.vue
So the param after the root URL will be mapped to this page.
For more resources about file system and routing in NUXT
Let's say my nuxt app is running in a subfolder 'test'.
nuxt.config.js:
router: {
base: '/test/'
}
That means my application runs on localhost:3000/test
Now, when I go to localhost:3000/tes, all i get is a 404 Error with the contents Cannot GET /tes
However, I want to redirect to /test, or show my own 404 page. But I couldn't figure out a way to handle that case.
I tried using a middleware, but that only worked for links within the subfolder.
Thanks for your help!
I found what I needed in the nuxt documentation:
Using a Hook to router.base when not on root:
https://nuxtjs.org/docs/configuration-glossary/configuration-hooks#redirect-to-routerbase-when-not-on-root
You can create an error layout for the 404 page
Error page
Or you can use middle to check the incoming URL and redirect them somewhere.
Middleware
You can create your error layout (error.vue in layout folder) and when error it will show that page.
<template>
<div>
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error' // you can set a custom layout for the error page
}
</script>
Link showing practically how to do that: medium
I am not able to make the page name as Index.vue but for other pages I did and it works.
Any idea how to resolve this one?
PS: For this project, I am preferring PascalCase for pages. I don't want to configure router.js manually.
Since Nuxt.js automatically creates the vue-router based on your /pages structure, if you really need to have a /Index route, you could create a folder called "Index", and then include your index.vue template there.
Then you're able to call the /Index route from nuxt-link:
<nuxt-link to="/Index">Click Me</nuxt-link>
first create a directory with name you want after create index.vue file in this directory
I think like this question you can make nuxt case-sensitive in routing
How to make routes case sensitive in Nuxt
By adding this code:
// nuxt.config.js
router: {
extendRoutes(routes) {
for (const key in routes) {
routes[key].caseSensitive = true
}
}
}
The issue is how to get Vue to render the correct path for an asset, if the path to the asset and the assets name is passed through as a props.
Explanation:
When using a Vue component... if passing in props which contain a path and a file name of an asset to be loaded
export default{
name: 'NewComponent',
props: ["path","file"],
computed:{
calculateCompletePath (){
return this.path+""+this.file;
}
}
}
If using something like the above in a manner such as:
<template>
<div>
<video>
<source :src="calculateCompletePath" type="video/mp4"/>
</video>
</div>
</template>
How can you get the src portion to render correctly - e.g Vue generates its own string referencing the media folder for example
/media/movie.6ac43bcf.mp4
Side note:
I've read somewhere there is the possibility to using require (<<asset>>) but that doesn't seem to work if used on the computed function e.g. return require (this.path+""+this.file);
Any ideas how to get this to work?
Please refer this document for a detailed explanation on how to resolve static assets:
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
I think the problem is that your asset(in this case an mp4 file) is not located in your computer's /media folder.
See these 3 points for a better understanding: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
If your media folder is located under the root folder(/), then, the computed value /media/movie.6ac43bcf.mp4 will work.
If your media folder is under src folder of the app, your computed property should return #/media/movie.6ac43bcf.mp4
If your media folder is somewhere else, then you should create a proper path using #/ or the ./ symbol to reach the file correctly.
How do I render a js.erb file after HTML in a HTML request?
I would put a call in a .js or coffee file in the assets/javascripts folder.
$(function() {
$.getScript(location.href);
}
You'd probably want to add some conditional logic unless there's a .js.erb file for every url.