I have an existing Nuxtjs app which using JQuery and some other librries, It's working fine when ssr is disabled, But I am trying to switch SSR from false to true in nuxt.config.js
and because the project is already built with many components and a lot of packages so I am not able to put process.client or use the tag in every component , or even check which package using the window object so I can include it in the plugins array.
Is there any global solution for all packages and all components ?
here's my nuxt.config.js
file
require('dotenv').config()
export default {
server: {
port: process.env.PROD === '1' ? '3000' : '3030',
},
head: {
title: 'My app',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'og:image',
name: 'og:image',
property: 'og:image',
content: 'icon.png',
},
{
hid: 'description',
name: 'description',
content: 'My app Desc',
},
{ name: 'format-detection', content: 'telephone=no' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/icon.png' }],
},
ssr: true,
target: 'server',
css: ['~/assets/less/theme.less'],
plugins: [
{ src: '@/plugins/antd-ui', ssr: false, mode: 'client' },
{ src: '@/plugins/vue2-google-maps', ssr: false, mode: 'client' },
{ src: '@/plugins/notifications', ssr: false, mode: 'client' },
{ src: '@/plugins/validation', ssr: false, mode: 'client' },
{ src: '@/plugins/mask', ssr: false, mode: 'client' },
{ src: '@/plugins/moment', ssr: false, mode: 'client' },
{ src: '@/plugins/charts', ssr: false, mode: 'client' },
{ src: '@/plugins/sortable', ssr: false, mode: 'client' },
{ src: '@/plugins/lazyLoad', ssr: false, mode: 'client' },
{ src: '@/plugins/click-outside', ssr: false, mode: 'client' },
{ src: '@/plugins/jquery.js', ssr: false, mode: 'client' },
],
components: true,
buildModules: [['@nuxtjs/router', { keepDefaultRouter: true }]],
modules: [
'@nuxtjs/axios',
'@nuxtjs/dotenv',
'cookie-universal-nuxt',
'vue-toastification/nuxt',
'nuxt-client-init-module',
],
toast: {
timeout: 2000,
draggable: true,
position: 'bottom-left',
},
axios: {
baseURL:
process.env.PROD === '1'
? process.env.BASE_URL
: process.env.BASE_URL_DEV,
browserBaseURL:
process.env.PROD === '1'
? process.env.BASE_URL
: process.env.BASE_URL_DEV,
},
build: {
transpile: [
'vue2-google-maps',
'validation',
'vee-validate/dist/rules',
'mask',
'moment',
'chart',
'sortable',
],
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
},
},
},
vendor: ['vue2-google-maps'],
},
router: {},
generate: {
routes: [
'/mynapp/profile/',
'/user-dashboard',
'/my-app-agents',
'/app/companies',
'/app/employees',
],
},
}