_id.vue

<template>
  <div class="container">
    <div class="flex flex-wrap -mx-2">
      <component
        :is="component.name"
        v-for="(component, i) in components"
        :key="i"
        :class="component.class"
        v-bind="{ ...component.props, offer }"
      />
    </div>
  </div>
</template>

<script>
const components = {
  OfferParameter: () =>
    import(
      /* webpackChunkName: "offer/offer-parameter" */ '@/components/Offer/OfferParameter.vue'
    )
}

export default {
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  components,
  async asyncData({ app, params, store, error }) {
    try {
      const offer = await app.$axios.$get(`/api/offer/${params.id}`, {
        params: {
          city: params.city
        }
      })
      const { page, components } = await app.$axios.$get(
        `data${app.$i18n.path('realty')}.json`
      )
      
      return {
        offer,
        page,
        components
      }
    } catch (e) {
      error({ statusCode: 404, message: app.$trans('Page not found') })
    }
  },
  head() {
    return {
      title: this.offer.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.offer.alt_description
        }
      ]
    }
  },
}
</script>

nuxt.config.js

const path = require('path')
const axios = require('axios')
const serveStatic = require('serve-static')

export default {
  head: {
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      }
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
      }
    ],
    script: [
      {
        src:
          'https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver'
      }
    ]
  },
  loading: {
    color: '#fe7f18'
  },
  css: [
    '@/assets/css/tailwind.css',
    '~/assets/scss/app.scss',
    '@node_modules/hooper/dist/hooper.css'
  ],
  modules: [
    'nuxt-babel',
    'nuxt-purgecss',
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    'portal-vue/nuxt',
    '@nuxtjs/svg-sprite',
    'cookie-universal-nuxt',
    ['vue-scrollto/nuxt', { force: true }],
    '@nuxtjs/redirect-module',
  ],

  plugins: [
    '~plugins/buefy.js',
    '~plugins/element-ui.js',
    '~plugins/translator.js',
    '~plugins/directives.client.js',
    '~plugins/vue-gallery.client.js',
    '~/plugins/vue-hooper-gallery.js',
    '~/plugins/global-component-loader.js'
  ],
  /*
   ** Axios module configuration
   *  See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  /*
   ** PurgeCSS
   ** https://github.com/Developmint/nuxt-purgecss
   */
  purgeCSS: {
    whitelistPatterns: [/nuxt-progress/, /hooper/, /el-/]
  },

  proxy: [
    [
      '/api',
      {
        target: 'http://127.0.0.1:8888'
      }
    ]
  ],
  build: {
    analyze: false,
    extractCSS: false,

    postcss: {
      plugins: {
        'postcss-import': {},
        'postcss-url': {},
        tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
        cssnano: {
          preset: 'default',
          discardComments: { removeAll: true },
          zindex: false
        }
      },
      // Change the postcss-preset-env settings
      preset: {
        stage: 0,
        autoprefixer: {
          cascade: false,
          grid: true
        }
      }
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}