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!
Related
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
I'm currently wondering about the difference between static and dynamic pages when using vue.js.
Are vue.js pages static or dynamic?
They can change on user interactions but not necessarily need to interact with the server to change data, when not using axios or alike. So does it still count as static just changing the frontend itself on input or interactions?
Little confused about this. Hope for good explanations.
A static page is a page delivered to the user exactly as stored and with no chance on being changed, end of story!
Although dynamic pages can take 2 types: Client-side dynamic web page and a Server-side dynamic web page.
Client-side dynamic page is changed without server requests. For example, when you click a button and something pops on the screen, or some content on the page changes, etc... (i think you take the idea).
Server-side dynamic page is changed with server requests, as you said for example, with HTTP requests using Axios.
And this is not the Vue.js definition, is the default definition for static and dynamic pages.
I have a JS based CMS that populates a single page with different content based on URL parameters passed to the page. I am using the shareURL format (https://www.linkedin.com/shareArticle?mini=true&url=''&title=''&summary=''&source='')
But the parameters I pass are never used it always falls back to what is being served directly from the server.
Do I have to use the API to make this work and if so can I use the API without making the user authenticate?
Is there a correct way to pass this so that linked in will display the correct data.
After testing this more I realised that the linked ins share URL does not take its parameters it only takes what is served from the server. So I changed my build process not to get the pages in run time but to precompile them onto the server. Maybe in the future linked in will have resolved this for dynamic pages.
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've spent a lot of time trying to inject variable to vue.js pages I have from a web server built on Express.
Basically I want to have a http end point on express that will get a parameter which I will then use to get more information from my db and inject it in a vue.js page I will serve.
For example, the endpoint will look like this:
/page/:page_id
And I will then use page_id to get information about the page and place it as vue.js variables so I can use it on the page.
The only lib I could find for this is something called express-vue - but it doesn't seem to be very stable.
Any thoughts?
Thanks