DEV Community

Cover image for How to build a Jamstack multi-language blog with Nuxt.js

How to build a Jamstack multi-language blog with Nuxt.js

Andrea Stagi on May 21, 2020

Jamstack (Javascript, APIs and Markup Stack) is a terminology around the new way of making web projects where you don’t have to host your own backe...
Collapse
 
xeroxi91 profile image
Matteo Moschitta

Thanks Andrea! Really interesting article.

I'm tryng to better understand how to setup the backend structure on Strapi.
Can you provide a repo or the access to the read only instance running on your server at strapi.lotrek.net/ please?

Collapse
 
astagi profile image
Andrea Stagi • Edited

Thank you :) Sure, I've just created the repo github.com/astagi/nuxti18n-strapi-...

My setup is really naive, you may have duplicated translations in the same language for the same post. Unfortunately I don't know how to define two fields "unique" as couple in Strapi.. πŸ˜… If you plan to use GraphQL consider suffixing your fields with language code to support i18n in Strapi, e.g. title_it, title_en, title_fr, content_it, content_en, content_fr and so on... My solution behaves friendly in the admin UI, though.

Collapse
 
xeroxi91 profile image
Matteo Moschitta

Thanks Andrea!

Collapse
 
bzkjyf profile image
bzkjyf

hi Andrea:
how to use @nuxtjs/apollo fetch fields( title_en, title_fr) with lang in the frontend?

Collapse
 
zvekov profile image
Yury Z.

Great!

you used old package apollo-fetch
you can say how used with @nuxtjs/apollo ?

Thanks!!!

Collapse
 
astagi profile image
Andrea Stagi

Hi Yury,

you're right, I used that old package to keep the service part as simple as possible to provide a service both in nuxt app and nuxt config for generated routes :) I haven't tried @nuxtjs/apollo yet but it seems a great package, you just need to provide a configuration and wrap your queries in .gql files, then you can fetch data in your components. The only doubt I have is if you can use a client instance in nuxt.config.js for generating routes, looks like there's a workaround in this issue github.com/nuxt-community/apollo-m...

Collapse
 
a1tem profile image
Artem Petrusenko

Thank you Andrea! Really helpful!

Collapse
 
viviansolide profile image
Vivian Sarazin

Priceless ressource.
Thank you so much!

Collapse
 
flozero profile image
florent giraud

Hello Thank's for the article ! You never had the issue that i18n/setRouteParams never works?

For me its working in one case but not in another one but both code are exactly the same

Collapse
 
alipasakaratas profile image
alipasakaratas

Hello, thank you for the article.

I want to get your opinion on a problem.
In the example you have made, the articles are available in both languages. What I want to learn is, if only one language is added in an article, is the link for the other one coming? For SEO, that link should not be created. How can i solve this problem.

Collapse
 
jainsuneet profile image
Suneet Jain

Hi Andrea,

Can you please share the netlify.toml file for this deployment. I am always getting error from netlify that /dist folder doesn't exist