@gowest/iq_medien_nuxt_module v1.0.4

iq_medien_nuxt_module

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

Installation as a module

1. Install @gowest/iq_medien_nuxt_module

yarn add @gowest/iq_medien_nuxt_module

2. Add @gowest/iq_medien_nuxt_module to the modules section of nuxt.config.js with an option. You can setup an empty object

{
  modules: [
    ...
    "@gowest/iq_medien_nuxt_module",
  ]
}

3. Add the following dependencies to the modules section of nuxt.config.js

{
  modules: [
    ...
    [
      'nuxt-lazy-load',
      {
        directiveOnly: true
      }
    ],
    '@nuxtjs/axios',
  ]
}

4. Add configuration in nuxt.config.js for css

css: [
    "node_modules/@gowest/iq_medien_nuxt_module/lib/assets/scss/fonts.scss",
],

styleResources: {
    scss: [
      'node_modules/@gowest/iq_medien_nuxt_module/lib/assets/scss/index.scss',
    ]
},

5. Add the iq_medien_nuxt_module to the winidicss config to be scanned for windi classes

{
    windicss: {
        scan: {
            dirs: ["./", "./.nuxt/iq_medien_nuxt_module/components"],
        }
    }
}

6. Add the used google fonts to nuxt.config.js

googleFonts: {
    families: {
      'Roboto Condensed': [400],
      'Poppins': [400, 500],
      'Source Sans Pro': [400],
    },
    download: true,
},

7. Add the following extra config to nuxt.config.js

axios: {
    baseURL: process.env.API_URL,
},

privateRuntimeConfig: {
    axios: {
        baseURL: process.env.API_URL,
    },
},

env: {
    baseUrl: process.env.BASE_URL,
    apiUrl: process.env.API_URL,
    uuid: process.env.PORTAL_UUID,
}

8. Add windi.config.js with following configuration, or you can customize it.

import { defineConfig } from 'windicss/helpers'
import plugin from 'windicss/plugin'

export default defineConfig({
  preflight: true,
  theme: {
    screens: {
      /* Breakpoint sizes */
      sm: '768px',
      md: '992px',
      lg: '1302px',
      xl: '9999px',
      'xs-only': { max: '767px' },
      'sm-only': { min: '768px', max: '991px' },
      'mobile-only': { max: '991px' }
    },
    extend: {
      padding: {
        default: '10px'
      },
      gap: {
        default: '20px'
      },
      fontFamily: {
        roboto: ["Roboto Condensed", "sans-serif"],
        poppins: ["Poppins", "sans-serif"],
        source: ["Source Sans Pro", "sans-serif"],
      },
      colors: {
        primary: {
          DEFAULT: "#92BD16",
          600: "#6B8A11",
        },
        'primary-hover': "#6B8A11",
        secondary: "#FA9A00",
        black: {
          DEFAULT: "#30373F",
          500: "#344050",
          600: "#12161C",
        },
        gray: {
          DEFAULT: "#F7F7F7",
          500: "rgba(0, 0, 0, 0.1)",
          600: "#707070",
        },
      },
    },
  },
  plugins: [
    plugin(function ({ addComponents }) {
      const newUtilities = {
        'h1': {
          "font-size": '38px',
          "@media (min-width: 992px)": {
            "font-size": '54px',
          },
        },
        'h2': {
          "font-size": '24px',
          "@media (min-width: 992px)": {
            "font-size": '48px',
          },
        },
        'h3': {
          "font-size": '24px',
          "@media (min-width: 992px)": {
            "font-size": '34px',
          },
        },
        'h4': {
          "font-size": '18px',
          "@media (min-width: 992px)": {
            "font-size": '20px',
          },
        },
        'p': {
          fontSize: '15px',
        },
        '.summary': {
          fontSize: '15px',
          "@media (min-width: 992px)": {
            "font-size": '16px',
          },
        },
        '.subtitle': {
          "font-size": '20px',
        },
        ".container": {
          width: "100%",
          "margin-left": "auto",
          "margin-right": "auto",
          "padding-left": "30px",
          "padding-right": "30px",
          "max-width": "100%",
          "@media (min-width: 992px)": {
            width: "calc(100% - 100px)",
            "padding-left": "50px",
            "padding-right": "50px",
          },
          "@media (min-width: 1302px)": {
            width: "1280px",
            "padding-left": "0",
            "padding-right": "0",
            "max-width": "1920px",
          },
        },
        ".container-lg": {
          width: "100%",
          "margin-left": "auto",
          "margin-right": "auto",
          "padding-left": "10px",
          "padding-right": "10px",
          "max-width": "100%",
          "@media (min-width: 992px)": {
            width: "calc(100% - 50px)",
            "padding-left": "25px",
            "padding-right": "25px",
          },
          "@media (min-width: 1402px)": {
            width: "1320px",
            "padding-left": "0",
            "padding-right": "0",
            "max-width": "1920px",
          },
        },
        ".container-fluid": {
          width: "100%",
          "margin-left": "auto",
          "margin-right": "auto",
          "padding-left": "0px",
          "padding-right": "0px",
          "max-width": "100%",
        },
      }
      addComponents(newUtilities)
    }),
  ],
})

For detailed explanation on how things work, check out the documentation.