Create Static Websites Using Nuxt with Vuetify and i18n

Create Static Websites Using Nuxt with Vuetify and i18n

Create Static Websites Using Nuxt with Vuetify and i18n.In this article, we will see how to create a nuxt website using Vuetify and Nuxt-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 Nuxt development mode

Template homepage

2. Internationalization (i18n)

Nuxt il8n homepage

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 [email protected]:<username>/nuxt-i18n.git modules/nuxt-i18n

3. Customizing Vuetify

Vuetify documentation site 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

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.

Netlify deployment page

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

Site settings page

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js

How to add Authentication to Nuxt.JS and Vue.JS

This Vue.JS Tutorial shows how to add Authentication and Authorization to your NuxtJS App and make it work with SSR

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

Observable notebook import example on Nuxt.js / Vue.js Application

Youtube-Demonetized-Words-Study .Observable notebook import example on Nuxt.js / Vue.js application, generated as static page on github pages

Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps

In this article, you'll learn how we can take advantage of Nuxt.js to build server-rendered JavaScript applications with Vue.js. Learn how to use its generate command to generate static files for our pages, and deploy them quickly via a service like Firebase Hosting.