I'm trying to create a dynamic param for one of my nuxt JS pages and am struggling to figure out the correct folder structure, the URL I need will be something like:
https://example.com/landing/123
Where 123 is my dynamic param that I need to grab using this.$route.
I've tried the following folder markups:
pages/_landing/index.vue
pages/landing/_index.vue
How can I achieve this?
I still need the page to load even if my param isn't supplied
use the [ ] syntax
pages/landing/[paramName].vue
further read
https://v3.nuxtjs.org/guide/directory-structure/pages#dynamic-routes
If 123 is the id, you need to save the file as _id.vue then you can get the value of id using this.$route.params.id
Edit: You directory structure will be pages/landing/_id.vue
Related
I want to use [id].js as my dynamic route so that I can make calls to my API with getThingById(id), but I want a more descriptive path.
Example:
With file structure of /page/things/[id].js,
I want to be able to have the id parameter accessible, but have my path be /things/thing_details rather than /things/1.
I've tried to use the catch-all feature:
/page/[...slug]/index.js. This gives me the path: /things/1/thing_details. This is the closest to what I want, but it's not ideal to have the id wedged in there like that.
Thanks in advance.
Help me please.
i am working with next js, i need to make this structure in url sitename/catalog/category/group/product
category, group, product pages are created dynamically, after that I need to generate static pages with ready-filled html markup in the out folder via the 'next export' command. I want to get all category, group, product pages to make a completely static site. In the documentation, I did not find information about a large nesting. Please tell me how to do it. Here is my current structure and what next js generates for me
Is it possible to do this?
my file structure
pages
catalog
index.tsx
[category]
index.tsx
[group]
index.tsx
You need to create dynamic URL using [slug] for all dynamic variable in your URL component.
Check the documentation: https://nextjs.org/docs/routing/dynamic-routes
Once you use dynamic URL, you need to serve getStaticProps (for data as props) and getStaticPaths (for diff routes) method on page to serve the data.
Note: above method are only executed on build time, in case of next export also.
Consider Folder A with an image 'image.jpg' and Folder B with a html page needing to access the image in Folder A to display image in HTML.
The below code works
<img src={require('../A/image.jpg')}/>
But when I loop through a JSON something like,
var list=[{'name':'aa','img'="../A/image.jpg"},{'name':'bb','img'="../A/image1.jpg"}] ,
assign them to states and inject into React component like,
<img src={require(this.state.image)}/>
this doesn't work.I just get "Cannot find module ../A/image.jpg" And i don't get why. Thanks in advance for the solutions.
It will not work because RequireJS uses a regular expression matching like this
cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g
and it expects your argument to be a declarative string literal.
I have a template defined in my .Vue file (and its subcomponents).
My goal is to provide the customer a possibility to override this template without changing any javascript.
If an elemtent with id="search-result" exists use this one.
If not use the one defined in *.Vue file.
Can i somehow achieve this? I read about inline-Templates, but the problem is that i have a nested structure with many subcomponents.
The user would have to define the complete template instead of overriding just the one submodule he wants to override.
Do you have any hints for me?
Thanks to Roy J.
You can use this in your created method.
this.$options.template = this.tpl
I'm creating a new project and I want to customize the location of the generated files from Randori. How can I do this?
Check out Lesson-02: Creating an Initial HTML file & Run Configuration
From here you will see how to edit your Randori configuration. You can make the generated output anything you want. However just make sure to update your main html file and point to the correct (customized) generated folder.
One more point on this when you call the launch() method of RandoriBootstrap, you can pass two arguments. The first is whether you want debug mode on or off (debug mode does cache busting) the second is the URL that the class loader will use to find your classes. Should you put things in generatedFoo folder, you need to make sure the RandoriBootstrap knows this.