Skip to content

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

Notifications You must be signed in to change notification settings

sterzuccio/basic-installation-NUXT

Repository files navigation

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: '/'
    }
  }
}

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: []
  }
}

Custom CSS

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


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

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published