Want to see an example of a multi-language Nuxt.js website using Prismic? Look no further! In this project, we provide all the code you need for a personal website with a homepage, information pages, and a navigation. Let's see how to set up Prismic to get this up and running.
As mentioned above, we provide you with all the source code you need to get this example website working. So let's go.
Install the Prismic Command Line Tool
If you don't already have it, make sure to first install npm on your machine.
Fire up a terminal (command prompt or similar on Windows) and run the following command.
npm install -g prismic-cli
Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:
sudo npm install -g prismic-cli
prismic command is now available globally. We will now use that tool to launch this tutorial project. In the terminal, navigate to the location you want to launch your project and run the following command.
prismic theme --theme-url https://github.com/prismicio/nuxt-multi-language-site --conf nuxt.config.js
prismic theme command will initialize a Nuxt.js project that is configured to connect with the repository you just created!
The command will end by displaying a link to your content repository backend in the form of https://your-repo-name.prismic.io.
Write some content
Start by creating three pages: a homepage and two regular pages.
Go to Content, hit New, and select the Homepage type. Fill in the content for the homepage banner, then add slices to add the page content.
Save and publish!
Now, create two information pages. Go to Content, hit New, and select the Page type. Make sure to fill the mandatory UID field that is used for that page's URL. Add some content slices, then save and publish!
Fill in the menu
Let’s fill in the menu with your pages.
Go to Content, hit New, and choose the Menu type. Give the menu a title, and add all your pages.
For each page you want to add to the navigation bar:
- Add a Link Label
- Click on Link, then “What kind of link do you want to insert?,” select “Link to a Document,” and select the appropriate page.
Save and publish!
Add another language
Now you will need to add another language to your repository. So navigate to your repo's settings ⚙️then select 'Translations & Locales' and add the required language.
Then you will need to repeat the 2 previous steps by adding content to the pages and menu that were added to this newly created locale.
You can either do this manually, which requires adding structure, assets, and content, or you can go to the documents in the original locale and use the 'Copy to another locale' feature. Using this you can either copy all the content or just the structure and assets.
Run the app
Now it's time to see things working!
Go back to the terminal (command prompt or similar on Windows), point it to your project location (cd your-project-folder), and run!
npm run dev
This will launch a local development server at http://localhost:3000.
Deploy & go live!
If you want to deploy your website Netlify is a great option. Simply follow the instructions on the Nuxt.js website on how to deploy on Netlify. You'll notice some of the work has been done for you already.
For a statically generated site
- Branch to deploy:
master, or which-ever branch you prefer
- Build command:
nuxt build && nuxt export
- Publish directory:
And that's it, deploy your website and you're live.
Customize to your liking
You should easily find what to modify in the code to customize the website: just edit the stylesheets and the templates to fit your design!
Just curious about the code?
If you aren't interested in recreating this project and would just like to look at the code then you can download the project here.