We were really excited when Strapi released a new update a few weeks ago that included internationalisation! This post will show you the basics of creating an internationalised site using Strapi and Nuxt.
Watch the video or follow along below.
If you are the kind of person that likes to dive straight into code, we have created example repositories for both the Nuxt and Strapi parts:
First things first, let's set up our Strapi CMS. Create a folder to hold this project, and then let's create a new Strapi project using your terminal and the following command:
After npm is finished installing your new Strapi instance, it will start the Strapi dev server and ask you to create an admin login. Go ahead and make your user, and voilà you've got a brand spanking shiny new headless CMS at your disposal.
"Now we're sucking on diesel"
Yes we have been watching far too much Line of Duty.
Adding some content
What's the point of a CMS if you've got no content? For the purpose of this demo, we are going to create a basic content type.
Once there, let's create a new single type by clicking the "+ Create new single type" link in the left sidebar.
Let's give our content type a name of "Home", and before clicking "Continue", navigate to the "Advanced settings" tab. Once there, make sure to check the "Enable localisation for the Content-Type" checkbox. You need to do this for any content type you would like to be localised. Once you have done that, it's safe to click "Continue".
Adding fields
A content type can't hold any content if it doesn't add any fields, so the next step is to add some. We are going to keep it super simple and will add three fields.
Create a text field called "Title":
Click "+ Add another field". Then add a rich text field called "Body":
Click "+ Add another field", and finally let's add media field called "Image" and set its' type to "Single media" so we only need to upload one image.
Next, go to the "Advanced settings" tab.
Frequently when creating a localised site, you won't want all fields to be localised. By default, you will have to re-enter content for each field in the new language when you switch between locales.
In our case, we want the Image field to keep the same image across all languages.
Uncheck the "Enabled for localisation" checkbox.
Now we can click "Finish" to create our fields. Take a second to give yourself a pat on the back; you're one step closer to localisation euphoria.
Adding your locales
Next up, we need to add your desired locales in Strapi. The locales are basically the different languages you want your site to support.
Once you are there, you should see that you already have one locale, English. You can add another one by clicking the "Add locale" button in the top right.
Choose your desired language in the modal that appears and click the "Add locale" button. Just like that, your CMS is now multilingual! Add as many languages as you need.
Set content type permissions
We are going to need Nuxt to be able to access our Stapi API to pull in content. By default, Strapi makes any new content type private, so we will need to change that.
Go to Settings, and under the "Users & Permissions Plugin" heading, click "Roles".
Click on the "Public" role, scroll down to the permissions and tick the "find" checkbox under "Home"
We are done setting up Strapi, and now it's time to add some content. Click "Home" under the "Single Types" section of the admin sidebar and enter content for your default locale.
Once you are happy you have created a masterpiece, save and publish it.
Now it's time to get out your foreign language dictionary and enter content for your second locale. To change the current locale, use the dropdown switch found in the right sidebar. We fancied French next.
Make sure to save and publish again. Each locale gets published separately. Repeat for all your locales. Hopefully, none of you decided to add the world's 6500+ languages; otherwise, it might take you longer than expected to finish this tutorial!
Next up is Nuxt
Your time as a content editor has come to an end, and now you need to get into your favourite hacker pose and start coding.
First up is creating a new Nuxt site. In a new folder, use the terminal to run the following:
Answer the questions via the CLI. In our case, we choose the following:
Language: JavaScript
Package manager: NPM
UI framework: TailwindCSS
Linter: ESLint
Rendering mode: Singe Page App
Deployment target: Static
Once that has done, cd into the new nuxt folder and start the dev server:
Your Nuxt site should now be running at http://localhost:3000/
Install Nuxt Strapi and i18n
Next, we need to install a few Nuxt modules. The Nuxt Strapi module will allow us to easily communicate with our Strapi API, and the Nuxt i18n module will enable us to add localisation.
Install both the modules:
Once that is done, we need to add both modules to nuxt.config.js and configure them with options. First, let's register the modules.
Next, we can configure the i18n module. Add the following to your nuxt.config.js:
The above tells the i18n plugin that we will have three locales English, French and German.
Feel free to adjust those to whichever languages you set up earlier in Strapi. It's important to note the locale codes you use should match the ones used when setting up locales in Strapi.
You can also set the sites default locale.
Now we can move on to configuring the Strapi module. Add the following:
This tells the module that we have a content type called "home" and it's a single. This will allow us to retrieve it easily later.
Loading localised content from Strapi into Nuxt
Now it's time to load content from Strapi into Nuxt. In pages/index.vue replace the script section with the following:
To load in the data, we can use the asyncData hook that will be run at build time. The Nuxt i18n plugin adds the i18n object to the context object that is passed into the function. This allows us to get the current locale with i18n.locale.
The Nuxt Strapi plugin also injects itself into the asyncData context, so we can then make a request to our API to get the home content. The import part here is how we filter the request by locale to retrieve the correct language:
All being well, the home content should now be available in your page component. Let's add it to the template. Replace the pages/index.vue template with the following:
There should be nothing that surprises you here; we just use standard Vue.js templating to output our page title, body and bind the image URL to the image src.
Hopefully, by this point, you can see the content you added appearing on your page.
It's not exactly a thing of beauty, but it is internationalised! At this point, you can test the internationalisation works by manually changing the address to something like this:
http://localhost:3000/fr
You should see your content change to the correct language. 🎉
Making a locale switcher
Having multiple locales might be fancy, but you need to let your users know what languages are available. To do that, we need a locale switcher.
Let's make a new component in the components folder called "LocaleSwitcher.vue"
Ok, let's break down what's happening here.
First, we get a list of the available locales in a computed function:
Next we loop over these in our template using a v-for and we add a nuxt-link to allow us to switch between each site. The switchLocalePath function is added by the Nuxt i18n module returns the current routes localised variants.
For example, we were on a page "/about" and we called the function like this switchLocalePath('fr') it would return "/fr/about".
See here:
And that's the locale switcher finished.
Now let's add it in to our page component:
You now have an easy way to switch between your locales!
That's a wrap
And that's it. You should now have a fantastic internationalised site powered by Strapi and Nuxt. We have only touched on the basics, but hopefully, it gives you a good idea of what's involved in building this sort of site.
We are super impressed with how easy the Strapi and Nuxt teams have made this, so big props to them!
As always, if you have any questions or like this post, let us know on Twitter: @pixelhopio
Dynamic social images with Nuxt, Cloud Functions and Cloudinary
Every little helps when trying to get your content noticed on social media, and having an eye-catching sharing image could be the difference between getting someone passing you by or someone clicking through.
This post will guide you by creating dynamic social sharing images unique to each page/post using Firebase cloud functions, Cloudinary and Nuxt.
We're so happy to say we have launched a rebuild of Rye and Beyond; it's been a fun project to do. Over this blog post, we will explain why we rebuilt it and go into a little bit of the hows. 😊
