What i want is to have the same behavior as wordpress but with nuxt.
In my page folder i have a structure like below:
index.vue
-tools
--_id.vue
--index.vue
-material
--_id.vue
--index.vue
My nuxt will generate respective route for these;
So we will take this url example mydomain.com/tools/1, in this page i have all content related to tools id 1 that stored in my database; i want to store in my database that this mydomain.com/tools/1, is associated to rewrited url mydomain.com/tools/my-first-tools; my-first-tools here i can update it at anytime but it will always related to mydomain.com/tools/1, so in the end when i land in mydomain.com/tools/my-first-tools, i want the same content as mydomain.com/tools/1 and with mydomain.com/tools/my-second-tools related to mydomain.com/tools/2
The content will dynamicly get by axios using id as parameter to get
Is there a way to make it with nuxt?
What you are describing is slugs. In your backend you will need to have a way to fetch either by slug or id but why not do just like Stackoverflow does it?
This website has a combination of the id and a slug for SEO purposes in its URL. Let's take a look at this URL:
https://taskotto.com/blog/14/how-to-achieve-customer-satisfaction-in-5-steps-in-the-hostel-industry
Do you see that SO has blog/{blogId}/{slug}?! You can do the same in your app:
mydomain.com/tools/1/my-first-tools
This way you don't need your backend to be able to retrieve either by slug or id. You will be able to retrieve by id only. You will have to re-order your nuxt folder to make sense:
tools
-- _index.vue
-- _todoId
--- _slug.vue
Related
I wanted to know if there is a way to dynamically generate routes based on data from a database?
Currently, i am defining my routes in a routes file and then importing that into my vue project. Is there a way i can have specific configurations stored on a database such as the path, name, meta data and then when the application loads, depending on the auth level of the user, create routes for that user?
Reason why I'm asking to create and not use a pre-written route with params is because i want to give my users (at some point in the future) the ability to create their own pages from my system.
So just wanted to know from the community if there is a way to do this based on an axios call or something?
You can just use dynamic routing. To create new templates, code must be changed anyway.
I think technically you are still better off using a title parameter with a common prefix and just looking up that title. In theory it sounds nice to have a completely dynamic application where anyone can create any page... until someone decides to use "login" as the page name and override your own login component, making the app unusable.
That said, you can use router.addRoutes to dynamically add routes to your router. Create a router with the static routes (e.g. your homepage, your login page, your 404 page), then extend your router based on an api call.
I am building an e-commerce front-end using Nuxt and I would like to have root level slugs for as many resources as possible. The most important ones are Catalog Paths and Product Urls. An obvious was is to use the Nuxt file structure for routing to create:
.com/category/men/tshirt
.com/category/women/tshirt
.com/product/name-of-product-slug
What I want to achieve is:
.com/men/tshirt
.com/name-of-product-slug
The logic would be to check if the patch matches any of known values (men, women) and load the Category Page component. If it doesn't, it will load the product component and finally a 404.
Is this possible? I've considered getting the Route Path and load a component or page on this or middleware.
Most of the time if you want to achieve a specific routing logic overriding the natural one of Nuxt, you would use the router-module of the nuxt-community.
Once using a classic router you would be able to create Regex to match your route since vue-router is using path-to-regex
You would be able to achieve something like
{ path: '/:gender(\(men|women))', name: 'category', component: Category }
Or any Regexp logic you want which should be enough in your case.
I am building a static vue website with some routes. In one of these routes, I use an Http GET request to get data from a remote server. Something like this:
www.example.com/products/1/
This checks my remote server for a product with an id of 1. The product is then returned, and I use that data to populate the template. The only issue is the meta tags. Ideally, I would like to set my meta tags using the data I receive from my server, especially the open graph tags, so that the Facebook share box is properly configured.
However, I am getting the data from the server in my created() function, so changing the meta tags from the component does not seem to work for Facebook and Google crawlers.
What is the correct way to tackle this issue? Thanks!
I'm building an app and want multiple Vue instances in different pages of my website!
Is there a way to use History routing and "hash" routing within the same app so I can have URLs like this.
www.mysite.com/blog/seo-friendly-content
www.mysite.com/blog/google-can-see-this
www.mysite.com/#/something-cool/state-preserved
www.mysite.com/#/cool-but-not-indexed
One part of my application needs to serve SEO friendly content, and one section has a lot of dynamic content. I don't want to force the user to make another server request to load an entirely different page on the "SPA" part of the application!
I guess I could serve static HTML pages that I create manually, but I would like to if possible to use the Vue router to handle the routing!
I couldn't find anything in the Vue.js documentation about this. Anybody that has done something like this?
If you have multiple root Vue instances, then you cannot have a single router instance. At a fundamental level, your application needs route splitting at a server level. It means your client-server router cannot solve this problem alone.
What you essentially need is SSR.
With SSR, your first page (whichever the user visits first) will be pre-rendered by the server. Then anytime, a user navigates to another page, it won't be full page refresh. It will be handled by your client-side router.
It is the year 2018 and I strongly suggest that you use HTML5 routing and not hash based routing.
Also, consider using micro-frontends if your application is very big and has distinct role-based views.
i have business listing site (www.brate.com) where people can search for local businesses and rate them.
the entire site is build using GWT (i.e. Ajax) and the all content is generated dynamically. Now i am in a phase where i want the site to be SEO friendly, below is my approach and please advise me if its the best way to implement it.
1- create static HTML snapshot of each business and its related data (site, address, phone number, user reviews...etc) and put all the generated HTML files under a single directory
2- create a sitemap xml file that contains all the above HTML links
3- configure webmaster to crawl and index all generated HTML snapshots
now my logic is that when google search query list one of the above generated html files in its search results i want to redirect the user to the site main page (www.brate.com) not the html snapshot.
can i use a redirect like "" in the generated snapshots?
if not what is the best way to achieve the above mentioned logic?
Thanks
Sameeh, one suggested approach for GWT
Ensure that you have correctly handled history tokens for all your pages in GWT. Let the tokens start with exclamation (!).
Associate GWT history tokens with generated pages using #! notation
Let tokens be keyword rich as we do for any URL optimization in SEO
Read through https://developers.google.com/webmasters/ajax-crawling/ for understanding #! notation.
Details on support by Bing: http://searchengineland.com/bing-now-supports-googles-crawlable-ajax-standard-84149