Nuxt i18n Portfolio Template

A multi-language🌎 portfolio template for Developers.

Lighthouse Score:

Desktop

Mobile

Desktop View:

---

Mobile View:

---

Features

✅ Internationalization 🌐

✅ Mobile-first UI Design 📱

✅ Fully Responsive 🖥

✅ Full Static Generation 🚀

✅ Styled with Tailwindcss 2.0 🎨

✅ Dark Mode (Auto & Manual) 🌚

Usage

# Download this repository to local machine
$ git clone https://github.com/kenxdrgn/nuxt-i18n-portfolio-template

# Go into the repository
$ cd nuxt-i18n-portfolio-template

# Install dependencies
$ npm install

# Serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Language

nuxt.config.js

export default {
  /*
   ** You can edit i18n config here
   */
  i18n: {
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        iso: 'en_US',
        file: 'en.json'
      },
      {
        code: 'jp',
        iso: 'ja_JP',
        file: 'jp.json'
      },
      {
        code: 'cn',
        iso: 'zh_CN',
        file: 'cn.json'
      }
    ],
    lazy: true,
    langDir: 'lang/',
  },
}

The language json files are in the lang directory.

lang
├── cn.json
├── en.json
└── jp.json

For more customization features, please refer to the i18n documentation.

For lite version without i18n features, check out lite-nuxt-portfolio-template.