Nuxt.js static 站点与使用 Vue.js 的动态单页应用程序？

Question

I am reading up on Static Site Generators for a client project and came across Vue.js and Nuxt.js which looks promising. As I have the choice between Vue.js and React, I would perfer Vue for now.

The client's website is about 120 pages with predefined content that will not change often. So it seems the perfect candidate for a static site - especially since his current WordPress site just got bashed by Google for abysmal page load times...

The "problem" or question is that beside these 120 pages there needs to be one page that is basically a single page application that dynamically fetches data from a backend through an API. To code this dynamic page, it would be ideal if I could use Vue.js as well.

I did find a lot of info about Nuxt.js with regards to static pages or server generated pages. But my use case would be many static pages plus one static page that talks to an API and that static page should be made with Vue.js as well (while including the sitewide header, menu, footer, etc.)

Is that possible and has anybody done something similar? Thanks for every pointer!

Answer 1

Yes, totally doable. I recommend using something like strapi.io or contentful to create your pages with content per component.

You would create each section of the site as a component under nuxtjs and the cms it self, see example below.

https://strapi.io/blog/creating-strapi-dynamic-zone-in-nuxtjs-app

Under pages you create "_.vue" which will pick up any "slug" and that's how you get the content for your page, using the slug.

Another example - https://raoulkramer.de/nuxt-js-static-page-generator-with-dynamic-pages/

Hope the above gives you a better idea.