Create Static Websites Using Nuxt with Vuetify and i18n

The challenge

A client asked me to replace their existing restaurant website, which offers a teppanyaki experience. The client’s main concern is Search Engine Optimization (SEO), so I decided to harness the power of a static generated site with Nuxt. I used Vuetify’s Material design framework and il8n to keep the site bilingual.

After a lot of googling, stack overflows and documentations, the site is deployed in Netlify. To save you a few clicks, here are the resources and basic steps which will help in creating your “nuxt” project.

Here is the new site. The complete code is on my github.

The process

1. Install Nuxt with Veutify template

Make sure you have node installed. Go to your command line and type.

$ npx create-nuxt-app <project-name>

It will prompt you to choose your favorite UI framework, here is where you choose Veutify. In my project, everything else is the first option (except the framework). See the Nuxt installation guide for more details. Follow the instructions on your command line.

cd <project-name>

npm run dev

Nuxt development mode

2. Internationalization (i18n)

The best example I found is from Nuxt il8n source code. Make sure to familiarize yourself with the folder structure. To install it in your existing Nuxt project:

cd <project-name>/
mkdir modules/
git clone https://github.com/<username>/nuxt-i18n.git modules/nuxt-i18n
# or
git clone git@github.com:<username>/nuxt-i18n.git modules/nuxt-i18n

3. Customizing Vuetify

Vuetify documentation site

Vuetify has a good documentation with interactive codepen and github samples. If you’re ever stuck or confused, get help from the official Vuetify discord server, where their core-team lives and will gladly answer your question. The net ninja has a whole playlist of Veutify tutorials on youtube.

4. Deployment in Netlify

Netlify hompage

Netlify definitely weren’t joking around when they said “a few clicks”. Connect your preferred git provider, pick a repository and hit that “deploy site” button. New to GitHub? Checkout Brad Traversy’s git and github crashcourse video for a refresher.

When deploying, make sure to run nuxt’s build command and enter a publish directory.

Your site will be deployed in their funky domain. You can choose your own domain by going to Site Settings.

Similarly, you can just drag, drop and deploy your local dist file if you don’t want changes to the repository.

I hope these steps and resources will help you as much as it helped me. Hat tip to the owner of the tutorials, github repo and other link mentioned in this article.

#vuejs #javascript #vue-js #nuxtjs #nuxt-js