How to build a multilanguage website with Gridsome
Storyblok is the first headless CMS that works for developers & marketers alike.
In this tutorial we will show you how to create a Gridsome project with Storyblok by using the plugin gridsome-source-storyblok. Step by step we will build some components, using the live preview functionality and add translations. The final result will be a multi language website with some example content:
You can clone the boilerplate that of this tutorial at: https://github.com/storyblok/gridsome-source-storyblok
Section titled Environment Setup Environment Setup
Section titled Requirements Requirements
To follow this tutorial there are following requirements:
- Understanding of
- Node, yarn (or npm) and npx installed
- An account on Storyblok.com to manage content
Section titled Setup the Project Setup the Project
Install the Gridsome boilerplate with the initial files:
Install Storyblok's Gridsome source plugin. Under the hood, this plugin will inject Storyblok's content items to Gridsome's GraphQL Data Layer and initialise the Storyblok plugin for Vue.js.
Edit the gridsome.config.js
file to use the plugin and set your token:
Run the Gridsome development server with:
Open your browser, go to url http://localhost:8080 and you will see the following page:
Section titled Load Data to the GraphQL Data Layer Load Data to the GraphQL Data Layer
Edit the file gridsome.server.js
to load the data from Storyblok's API and create the pages using the full_slug attribute.
Section titled Define the path for the homepage Define the path for the homepage
By default is the content of the homepage covered by Home
content entry in Storyblok. This means that previous code would not generate index.html
in the root of your website, but in the folder home
like this home/index.html
. To override this, you just need to update the code of the function data.allStoryblokEntry.edges.forEach(({ node })
to the following code.
Section titled Create the StoryblokEntry.vue Template File Create the StoryblokEntry.vue Template File
How will Gridsome know how to render data from the Storyblok API? Using Template Files. So lets create a file called StoryblokEntry.vue
in src/templates
:
Section titled Setup Components Setup Components
When you create a space in Storyblok you will see a default page called Home. This page contains multiple components, like Page, Teaser, Feature and Grid. So we will create this components and register them globally as Vue.js components in src/components
Section titled Page Component Page Component
Create a file called Page.vue
in src/components
:
Section titled Teaser Component Teaser Component
Create a file called Teaser.vue
in src/components
:
Section titled Grid Component Grid Component
Create a file called Grid.vue
in src/components
:
Section titled Feature Component Feature Component
Create a file called Feature.vue
in src/components
:
Section titled Register the Components Register the Components
Now register the components as global in src/main.js
:
Open your browser, go to http://localhost:8080/home and you will see the following page:
Section titled Adding some Styles Adding some Styles
The last step is to add some example css styles in the layout file. Create the file index.html
in the folder src
and add the following content:
Now restart your server and open the page again. It's better, isn't it?
Section titled Live Preview Live Preview
To use Storyblok's live preview feature it is necessary to do the following changes:
- Add a page for the Editor
- Add v-editable directives in the components
Section titled Add the Editor Page Add the Editor Page
The Editor page will be a page that syncs the changes from Storyblok. Create the file Editor.vue
in src/pages
with the following content:
Section titled Add the v-editable Directive Add the v-editable Directive
Now add the v-editable directive in the components Teaser, Feature and Grid like this:
As last step open your Storyblok space and set the Location setting to http://localhost:8080/editor/?token=<YOUR_TOKEN>&path=
:
When you access the Home page in your space it will open the Live Preview and show your project inside an iframe:
Now you are able to edit components, change the text and add other components and the live preview will be automatically sync the changes that you made.
Section titled Setup Multilanguage Capabilities Setup Multilanguage Capabilities
In Storyblok you have two options for internationalisation:
- Field level translation: Each field marked by translatable will have a translation and you have a single content item for all translations.
- Multi-tree translation: Each translation will have it's own content item and the translations are saved in different folders.
For this tutorial, we use the first option.
Add the new language in Space Settings->Languages like in the following screenshot:
Storyblok's source plugin already will automatically load all content for each language. Try it out and translate some fields:
In the last step we will edit the component src/layouts/Default.vue
to add a language switch:
Restart your server and open http://localhost:8080/home. If all went well you can change the translation by clicking on the links in the upper right corner of the page.
Section titled Conclusion Conclusion
Using the Gridsome source plugin we built a MultiLanguage website with live preview, learned how to navigate between different translations and load pages from the GraphQL Data Layer. You can clone this tutorial code in https://github.com/storyblok/storyblok-gridsome-boilerplate.
Resource | Link |
---|---|
Github repository of this tutorial | https://github.com/storyblok/storyblok-gridsome-boilerplate |
Gridsome | Gridsome |
Vue.js | Vue.js |
Storyblok App | Storyblok |