2

I made part of a website using Vue.js (CDN Version not CLI) and it's a directory that entries loads based on location etc.

And now, I figured out that data is not indexable since it's loading in front end. And searched about it, and I guess must use NUXT.JS to compile those data at server so search engines can see those data too and index them.

I just don't have any idea if nuxt.js using CLI can embed as part of a vue.js project so I can load ONLY those data at server side and rest of project stay in vue.js (CDN) or, must rebuild whole page using nuxt.js?

This is the website I'm talking about.

kissu
  • 40,416
  • 14
  • 65
  • 133
Amino
  • 563
  • 1
  • 9
  • 26
  • Hi, there are ways to achieve what you're asking for. Meanwhile, I will start with 2 questions: 1. why do you use a CDN for Vue (any specific limitations of your company or alike)? Asking because it's subpar when compared to a hosted version created with the CLI. 2. Would it be an issue to have it as a whole Nuxt app? You could get some server generated pages and some other as SPA only (if SEO is irrelevant there). – kissu Sep 06 '21 at 13:11
  • @kissu about first question, I would say, I started learning vue.js and found CDN way easier than CLI, and made it while I was learning vue.js about second one, I'm a bit afraid of nuxt, since I have no idea how to run it on server, and i'm not sure if must rebuild it completely? or can only rebuild at least this only page? and is it usable like vue.js cdn? since I made parts using it and loaded them as WP shortcodes in page. – Amino Sep 06 '21 at 13:33
  • @kissu actually, I just need that SEO issue resolve, so search engines can see those directory entries, But I dont' want to rebuild like, sidebar map, or filters or other parts using nuxt.js again – Amino Sep 06 '21 at 13:38
  • Oh wait, you're using Wordpress with Vue CDN? Didn't saw this one before answering. Hm, this is a bit more complex so. Not even sure how some prerender will behave... – kissu Sep 06 '21 at 14:13

1 Answers1

1

If you want to have pre-rendered content, you can use services like prerender.io as explained in the official documentation: https://ssr.vuejs.org/#what-is-server-side-rendering-ssr
Keep in mind that this is different from SSG/SSR and is sub-par on some points.

You can use Gridsome too but this is not moving as quickly and Nuxt do have a bigger community.

If you don't have any limitations, you should probably be using a project generated with a CLI. This is still the most production-aimed way of working with Vue/Nuxt.
Using a CDN do have several drawbacks.

You don't need to be afraid of Nuxt. Start by typing npx create-nuxt-app my-cool-project and check what you do want to use. When it's done, aim at the documentation and start reading some of it's features.

You will probably need ssr: true (default value) and target: 'static'. yarn && yarn dev and then, it's a matter of using the fetch() or asyncData() hooks.

You don't need to use them all and you can have all of your app Server Side Generated (called SSG) done for you without even noticing.

Actually, you need to understand what is happening only when you do have an issue. For the most part, you can follow the conventions and keep using it as a Vue app for the most part.

I saw some people totally new to Nuxt, who migrated from Vue (CLI tho) successfully without any issues within few hours. Of course, it depends on how comfortable you are and the complexity of the app, but it's totally doable.

PS: you need to know that Nuxt is only compatible with Vue2 as of today tho. More to come in 2 weeks during NuxtNation.

Also, I'm watching the tag daily, so you can totally come back here and post a properly formatted question, I'll probably be able to help you with your issue (I'm a Nuxt.js ambassador). If not, I'll send you to the right people/place to debug your issue.

kissu
  • 40,416
  • 14
  • 65
  • 133