Suppose I want to make a blog.
in /pages/ I would add
pages/
-- blog/
--+-- _artcile.vue
--+-- index.vue
-- blog.vue
which would let me have a route /blog and /blog/:article?. Most such examples I have found in these cases, (e.g. in the Nuxt docs for user and user_id) the content which is being requests is standard (e.g. user id or markdown file for the blog). But what if I want each entry to be a unique component? e.g.
pages/
-- blog/
--+-- custom_article_1.vue
--+-- custom_article_2.vue
--+-- index.vue
-- blog.vue
You could just create _artcile.vue and inside it determine yourself what component you want using :is. Docs
<component v-bind:is="currentTabComponent"></component>
Related
Some Context
I'm building a blog, with content mostly coming from markdown files, using NuxtJS Content.
It if helps, you can see my project on Github (or the deployed site here).
I understand how to create dynamic pages from the MD files under /content.
But I don't know how to inject content from one of these files into a static page.
content/
├── blog/
│ ├── post1.md
│ ├── post2.md
├── privacy/
│ ├── policy.md
│ └── something-else.md
pages/
├── blog/
│ ├── _slug.vue
├── privacy/
│ ├── _slug.vue
├── privacy.vue
├── index.vue
Using my current method/knowledge, I generated a dynamic page based on policy.md:
<template>
<article>
<nuxt-content :document="policy" />
</article>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const policy = await $content('privacy', params.slug).fetch()
return { policy }
}
}
</script>
But I don't want to generate a dynamic page from the MD, or use the slug in the route.
I want to take the contents of policy.md, and insert them into privacy.vue - but I don't know how.
What I tried
It doesn't work using the method from above, but I feel like it should.
console.log(policy) returns [object] [OBJECT]
& console.log(policy.title) returns undefined
What should this tell me? (trying to improve my debugging skills here lol)
Why does this work in _slug.vue but not in page.vue?
Feel like I'm missing some contextual knowledge re: how things work / what the right approach is here.
Alright, so I solved my own problem just before hitting submit by adding this to the static page template:
<div v-for="policy in policy" :key="policy.title">
Why did that work?
Is it because asyncData doesn't know in advance how many items will be fetched, and creates an array -> so policy.title was undefined when it wasn't policy.title at position X in the array (which, I guess, the v-for gives us?)..
I thought that giving a path to a file rather than a dir, like:
const policy = await $content('privacy/policy.md', params.slug).fetch()
Would make it clear that it would be a single item, but that didn't work for me when I tried it earlier. How does that work?
I think this is probably not a nice way to fix it. I mean, I know that there will only ever be one file in this dir, but yeah, there must be a more appropriate way to do this?
Is it possible in Nuxt.js to have multiple route parameters with same level hierarchy?
For instance:
- entry
-- _id.vue
-- _slug.vue
- index.js
No, it's not possible.
But you can use a simple workaround.
Case 1
You need both _id and _slug in the same route. Then you can simply nest them. So that your route will look like this: entry/_id/_slug. And your files would look like this:
entry/
--| _id/
-----| index.vue //this one is for _id
-----| _slug/
--------| index.vue //this one is for _slug
Also you can swap _id with _slug if it fits your needs better.
Case 2
You need two different routes: entry/id/_id and entry/slug/_slug. In this case your files would look like this:
entry/
--| id/
-----| _id.vue
--| slug/
-----| _slug.vue
How do I use routing and folder structure to pass multiple optional parameters in the URL?
What folder structure should I create to handle such cases where the route is something like
user/:id/:product
user/:id/product/:id
You need to create dynamic nested routes. In order to do that you need to manage your folders as indicated in the documentation here.
For your example it should be :
// For user/:id/:product
user/_id/_product
pages/
--| user/
-----| _id/
--------| index.vue
--------| _product
-----------| index.vue
// For user/:id/product/:id
pages/
--| user/
-----| _id/
--------| index.vue
--------| product
-----------| _id.vue
I am trying to access modules from the parser.rs and another.rs in the solve.rs. How to include those modules and use the "use statements"? If that is not possible what should be the code structure?
Here is the application folder tree:
app/src
--- main.rs
--- another.rs
--- mod.rs
--- parser/
-------- parser.rs
-------- mod.rs
--- solver/
-------- solve.rs
-------- mod.rs
Your first option is absolute paths:
use crate::parser::Whatever;
use crate::solver::Another;
crate here is a keyword representing the crate root.
You can also use relative paths for advanced scenarios. Both solutions are discussed very nicely in the relevant Rust Documentation
Also, don't forget that you need to make the modules public. They will be private by default and not accessible from parents or siblings.
To access parser/parser.rs and another.rs from anywhere in your crate, you can use absolute paths (here I am also using nested paths, which is not required but makes the structure of modules more clear):
use crate::{
parser::parser,
another,
};
You can also use relative paths with super, which refers to the parent module. More information is avaiable in #Ishmaeel's answer.
Regarding your code structure, it seems a little strange why you have mod.rs (not wrong, but just strange, especially 0; you can totally leave 1 and 2 if you like it, but 0 might confuse you):
app/src
main.rs
another.rs
mod.rs // 0
parser/
parser.rs
mod.rs // 1
solver/
solve.rs
mod.rs // 2
Regarding 1 and 2:
mod.rs was used in the 2015 edition for being able to create nested modules, but is no longer needed in the 2018 edition (assuming that you are using the currently newest and default for cargo 2018 edition, see What are editions?):
A foo.rs and foo/ subdirectory may coexist; mod.rs is no longer needed when placing submodules in a subdirectory.
Regarding 0:
The module you are defining via this is actually named mod (not src as you may have expected, though I'm not sure at all what you expected here), I'm unsure if you meant to do that. However if you did, there is still a way to access it via r# - raw identifiers, available since Rust 1.30:
use crate::r#mod;
If you don't want to write r#mod all over the place, you can use as like this:
use crate::r#mod as new_name;
Then you can refer to the module via new_name.
I have an issues with nuxtjs route naming.
Ex: my pages folder is
page:
-|blog:
-|_categorySlug.vue
-|_postSlug.html.vue
-|service:
-|index.vue
When i access url like
example.com/blog/demo-post-slug.html -> route map to /blog/_categorySlug.vue
example.com/blog/demo-category-slug -> route map to /blog/_categorySlug.vue
Because _categorySlug.vue place in the first order inside dir blog.
When i change the file name _postSlug.html.vue to _aPostSlug.html.vue to make it become the first order.
page:
-|blog:
-|_aPostSlug.html.vue
-|_categorySlug.vue
-|service:
-|index.vue
It's all right but the file naming isn't good. Anyone can give me an suggestion for this?
Thanks!