The starter kit for my nuxt.js projects

Notes.md

The common things

npm i nuxt-webfontloader nuxt-lazy-load @nuxtjs/toast vue-js-modal @tailwindcss/typography hooper @tailwindcss/forms

For Lightbox plugin npm install --save vue-cool-lightbox

A typical tailwind config file

module.exports = {
  theme: {
    extend: {
      colors: {
        "google-blue": "#3069E2",
        "facebook-blue": "#3B5998",
        "watabid-red": "#E34138",
        "watabid-blue": "#2A76BC",
        "watabid-pana": "#FF725E",
        "gray-50": "#F9FAFB"
      },
      spacing: {
        "72": "18rem",
        "84": "21rem",
        "96": "24rem",
        "100": "28rem",
        "128": "32rem",
        "132": "40rem"
      }
    },
    fontFamily: {
      sans: [
        "Avenir",
        "Roboto",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Ubuntu",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"'
      ]
    }
  },
  variants: {},
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography")
  ],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === "production",
    content: [
      "components/**/*.vue",
      "layouts/**/*.vue",
      "pages/**/*.vue",
      "plugins/**/*.js",
      "nuxt.config.js",
      "hooper/dist/hooper.css",
      "vue-cool-lightbox/dist/vue-cool-lightbox.min.css"
    ]
  }
};

A typical nuxt config file

const title = "Your Title";
const description = "Your Description";
const url = "https://your-url.com";
export default {
  // Target (https://go.nuxtjs.dev/config-target)
  target: "static",

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title,
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: description },
      { hid: "og:type", property: "og:type", content: "website" },
      { hid: "og:url", property: "og:url", content: url },
      { hid: "og:title", property: "og:title", content: title },
      {
        hid: "og:description",
        property: "og:description",
        content: description
      },
      {
        hid: "og:image",
        property: "og:image",
        content: `${url}social.png`
      },
      {
        hid: "twitter:card",
        property: "twitter:card",
        content: "summary_large_image"
      },
      { hid: "twitter:url", property: "twitter:url", content: url },
      {
        hid: "twitter:creator",
        property: "twitter:creator",
        content: "@watabid"
      },
      { hid: "twitter:title", property: "twitter:title", content: title },
      {
        hid: "twitter:description",
        property: "twitter:description",
        content: description
      },
      {
        hid: "twitter:image",
        property: "twitter:image",
        content: `${url}social.png`
      }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: [
      {
        hid: "rzpay",
        src: "https://checkout.razorpay.com/v1/checkout.js",
        defer: true
      }
    ]
  },
  loading: {
    color: "#E34138"
  },
  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: ["@/assets/styles/main.css"],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    "~plugins/modal.js",
    { src: "~/plugins/apex", ssr: false },
    "~plugins/lightbox.js"
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    "@nuxtjs/tailwindcss"
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
    // https://go.nuxtjs.dev/pwa
    "@nuxtjs/pwa",
    // https://go.nuxtjs.dev/content
    "@nuxt/content",
    //https://www.npmjs.com/package/nuxt-lazy-load
    "nuxt-lazy-load",
    //https://www.npmjs.com/package/@nuxtjs/toast
    "@nuxtjs/toast",
		//https://www.npmjs.com/package/nuxt-webfontloader
		"nuxt-webfontloader"
  ],
	webfontloader: {
    google: {
      families: ["Product Sans:400,500,700,900?display=swap"]
    }
  },
	axios: {
    baseURL: process.env.BASE_URL
  },
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },
  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    baseURL: "http://13.126.163.14/api/"
  },

  // Content module configuration (https://go.nuxtjs.dev/content-config)
  content: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {}
};