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.
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.
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.
npm run dev
Nuxt development mode
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
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.
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.
Responsive ecommerce template built with Vue.js and Nuxt.js
This Vue.JS Tutorial shows how to add Authentication and Authorization to your NuxtJS App and make it work with SSR
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.
Youtube-Demonetized-Words-Study .Observable notebook import example on Nuxt.js / Vue.js application, generated as static page on github pages