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 navigation. Let's see how to set up Prismic to get this up and running.
1. Launch the project
First, Install the prismic-cli package. Launch a terminal instance and run the following command to install the package globally.
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
Once it's been installed, navigate where you want to create your new project folder and run the following command:
prismic theme --theme-url https://github.com/prismicio/nuxt-multi-language-site --conf nuxt.config.js
This will create a new Prismic content repository, set up the custom types, create a few documents, and install the project code.
2. Multi-language configuration
For this example project, you'll have a default locale configuration on your repo. This will be:
en-usas the master locale
- And, French
fr-fras the second locale
And, if you want to add additional locales, go to your Dashboard, enter your repository, go to Settings / Translations & locales and add another language.
🌐 Change the master locale
If you wish to modify the master locale of your repository, reach out to us so we can make this change for you.
3. Run the website
Now, open your project folder in the terminal and run the following command:
npm run dev
Then this next command will launch a local development server at http://localhost:3000. Now all of your content is displayed!
4. Deploy & go live!
If you want to deploy your website, Netlify is a great option, as it allows you to deploy as both a SPA and a Statically built website. Follow the instructions on the Nuxt.js website on how to deploy on Netlify.
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!