basic-installation-NUXT Tailwind Templates

Basic Installation Nuxt

A basic installation of nuxt with some modules pre-installed and configured (Tailwind CSS, AXIOS, I18n - EN default lang and IT -, DotEnv, Sitemap), Custom CSS for custom rules

basic_installation

Build Setup

# 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

Package installed

Tailwind CSS

For custom rules use tailwind.config.js

AXIOS

Usage

In nuxt.config.js insert the base url like the example

axios: {
  baseURL: 'http://localhost'
}

I18n

Languages entered

  • English (Default lang)
  • Italian

    Usage

    To enter a new language, insert in nuxt.config.js the parameters like the example
    export default {
    modules: [
      ['nuxt-i18n', {
        locales: [
          {
            code: 'en',
            iso: 'en-US',
            file: 'en.js',
            dir: 'ltr'
          }
        ]
      }
    ]
    }
    
    For the name of the pages used for routing, insert the code as shown in the example inside export default, changing the path for each language configured
    export default {
    nuxtI18n: {
      paths: {
        en: '/',
        it: '/'
      }
    }
    }
    
  • For more detail visit I18n for Nuxt

DotEnv

Use this file for global variables

Sitemap

IMPORTANT

The sitemap declaration in modules of nuxt.config.js should always be left last for its correct functioning

As for the generation of dynamic routes see the file modules/sitemapRouteGenerator.js

Usage

For module configuration, enter the chosen parameters in the nuxt.config.js file as shown in the example

export default {
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'http://yoursite.com/',
    defaults: {
      changefreq: 'monthly',
      priority: 1.0,
      lastmod: new Date()
    },
    gzip: true,
    exclude: []
  }
}

For insert custom CSS rules use the file ./static/css/custom.css


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

Top categories

Loading Svelte Themes