Internationalization with Nuxt and Strapi by Pixelhop

hello it's gemma here from pixel hop today i'm going to show you how to build an internationalized site using nux and strappy so let's get going first of all we need to build our strappy site just use mpx and um just call it strappy let it do its thing [Music] yeah we're super impressed with how quick this was today actually cool so that's done putting the credentials for cms cool we've got a strappy site so now let's create a content type i'm just going to build a single type call it home for the sake of demo and then in settings we need to enable the localization for the content type add some fields i'll just add a title a body and an image and these fields will automatically have internet internationalization enabled on them obviously for the image field they don't want that so for certain fields you can that you don't that you want to be the same across all languages you can disable the localization so for the image field we want that to be the same so we just disabled that so in settings now we just need to add our different languages so we've got english that'll be the default and then we just add um french said french let's add german as well cool so now we need to just make um the content type um publicly accessible so it doesn't need to be authentic authenticated for the api so just click find and then that's that now just add some content so for each of the different languages so it's just english just add any old image i don't know what that would do cool english and say we just need to publish that and then add the other languages bonjour see that image is there so that'll be there for german as well actually i think that might be two words okay so we save that and publish that cool so that's strappy all set up now let's create our next site just use the mpx command call it next let's do its thing run through them settings really quickly cool [Music] cool now we should have an upside cd into that directory and just run the site looks like cool so now we just need to install the next i18n plugin open up the code and add in some of the configs so we need to do some nux config config even add in the nux i18n and then add in the options for that so we can pass in the different languages and also passing at its default cool just install the nuxtrappy plugin add that into the modules into the nox config again then add in the strappy and we need to add in the different entities so the content type which was home that i added and that was a type of single so to get the content we need to use the async data hook to load the content in from strappy and then we can get access to the current locale using the nuxtai18 module which it is included in this async data context object um then we can query the home entity using the current locale to make sure that we laid the correct language so let's just check this there we go you can see there cool so now that we have uh got content from strappy we can start using it into inside our page so just add the title get rid of that add in the body text and a bit of styling using tailwind just get the image url so let's look at this make it smaller i need to add it on to parent cool so there we go we've got the english page coming through so now we just need to add a switcher so let's create html just create a list link in and then so first we need to create a computed property and we just need to get a list of the different locales from next this cool and then just add in a next link then this switch path is added by the i18 and next plugin it returns the current path of the locale you pass so whether it's like english or en or fr i'll just use that inside the link there and then just need to loop over get a link for each of the locales cool so i just need to import that component into our home page hey a little bit styling as well tailwind oh i did three equals that should work now cool so there we go there we have it that's internationalization with nuxtan strappy hope this has helped um i've been clear enough to follow if you've got any questions then just give us a shout um but yeah we thought it was really easy to do so just thought we'd share the knowledge thanks for watching everyone

Channel: Pixelhop

Views: 2,353

Keywords:

Id: AZh7m8ysI0U

Length: 11min 20sec (680 seconds)

Published: Fri May 14 2021