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
1. Install the Prismic Command Line Tool
The first step will be to install the 'prismic-cli' package. Launch a terminal, from where you will run the command to globally install the package.
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 the installation is finished, navigate to the location where you want to create your new project folder and run the following command. This will create a new Prismic repository along with different custom types and install the project code:
prismic theme --theme-url https://github.com/prismicio/nodejs-multi-language-site --conf config/prismic-config.js
prismic theme command will initialize a Node.js project that is configured to connect with the repository you just created and when it's finished it'll display a link to your content repository backend in the form of https://your-repo-name.prismic.io.
2. Add languages to the repository and write some content in different languages
1. Once you create the repository with the prismic theme command it'll be available in your Dashboard. Choose the master language. After that, you can add more languages by going to Settings / Translations and locales / Select an existing locale from the list.
2. Go to "Content" and hit "New", choose the Homepage type and add some content in the master language. Save and publish! Learn how to Copy content to a different locales
3. Add some content using the Page and Menu types. Make sure to fill the mandatory UID field that is used for your page's URL. Save and publish.
4. Next, in the 'config' folder of the project open the 'site-config.js' file and replace the default language with the master language of your repository.
3. Launch the local server
Now, open your project folder in the terminal and run the following command:
npm install -g nodemon
Then this next command will launch a local development server at http://localhost:3000.
Now all of your content is displayed!
4. Deploy to Heroku and go live
An easy way to deploy your Node.js application is to use Heroku. Just follow these few simple steps once you have successfully signed up and installed the Heroku toolbelt:
Create a file with the name Profile in your application root and add following code:
web: node app.js
Create a new Heroku application
Initialize a new Git repository
heroku git:remote -a your-heroku-app-name
Commit your code to the Git repository and deploy it to Heroku
git add .
git commit -am "make it better"
git push heroku master
You can now browse your application online
Customize to your liking
You can easily modify the code to customize the project, 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.