NUXT does not optimize static site - vue.js

I have a project in NUXT js and I want to generate a static website.
It does work, but does not optimize it: does not extract the css in a single file with build.extractCSS for example.
Is it something related to the static mode?
I also try some other optimization but they don't seems to work either.
Here my config:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
target: process.env.NODE_TARGET === 'static' ? 'static' : 'server',
router: {
base: '/myRoute/',
routeNameSplitter: '/'
},
server: {
host: "localhost" // default: localhost
},
head: {
titleTemplate: 'myProject',
title: 'myProject',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{
hid: 'icon',
rel: 'icon',
type: 'image/png',
href: '/favicon.png'
}
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/css/custom.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// 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/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
['#nuxtjs/vuetify', { treeShake: true }],
"#nuxtjs/svg",
'vue-social-sharing/nuxt'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
],
pageTransition: {
name: 'slide-fade',
mode: 'out-in'
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
env: {
NUXT_ENV_API_HOST: process.env.NUXT_ENV_API_HOST,
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
meta: {
/* meta options */
theme_color: "#27363B"
},
manifest: {
lang: 'en'
}
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
optionsPath: './vuetify.options.js',
customVariables: ['~/assets/variables.scss'],
treeShake: true,
// defaultAssets: false,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
// optimizeCSS: true,
// extractCSS: true,
build: {
analyze: {
analyzerMode: 'static'
},
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
minifyURLs: true,
removeComments: true,
removeEmptyElements: true
}
},
optimizeCSS: true,
extractCSS: true,
terser: {
parallel: true,
cache: false,
sourceMap: false,
extractComments: {
filename: 'LICENSES'
},
terserOptions: {
mangle: true,
output: {
comments: /^\**!|#preserve|#license|#cc_on/
}
}
},
babel: {
plugins: [
["#babel/plugin-proposal-private-property-in-object", { "loose": true }]
]
},
extend(config, { isDev, isClient }) {
config.module.rules.push({
test: /\.(obj|mtl|fbx|gltf|glb|hdr|bin)$/,
loader: 'file-loader'
})
},
transpile: [
"three"
]
},
}

Related

Cannot read properties of undefined (reading 'links')

I'm new to using nuxt js. I'm currently having problem running the project and kept get an error like the above. I already copy the content from .env example and make .env file. Is this have the correlation with the API Base url? I used the same api base url like before and works just fine but suddenly i get these error.
Here is my nuxt.config.js
require("dotenv").config();
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: "Reqruit",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{
hid: "description",
name: "description",
content: "Reqruitasia website",
},
{
name: "theme-color",
content: "#015f92",
},
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "preconnect",
href: "https://fonts.googleapis.com",
},
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;0,700;1,400&display=swap",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined",
},
],
},
router: {
middleware: "route-history",
},
/*
** Customize the progress-bar color
*/
loading: { color: "#015f92" },
// Global CSS (https://go.nuxtjs.dev/config-css)
css: ["~/assets/scss/main.scss"],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: "~/plugins/axios" },
{ src: "~/plugins/filters" },
{ src: "~/plugins/mixins/user" },
{ src: "~/plugins/mixins/validation" },
{ src: "~/plugins/vuelidate" },
{ src: "~/plugins/mixins/swal" },
{ src: "~/plugins/bus" },
{ src: "~/plugins/vue-select", ssr: false },
{ src: "~/plugins/mixins/axios-error" },
{ src: "~/plugins/jsonld" },
{ src: "~/plugins/dayjs", ssr: false },
{ src: "~/plugins/silentbox" },
{ src: "~/plugins/sticky-sidebar", ssr: false },
{ src: "~/plugins/smooth-scroll", ssr: false },
{ src: "~/plugins/money", ssr: false },
{ src: "~/plugins/keyboard-detector", ssr: false },
{ src: "~/plugins/nl2br", ssr: false },
{ src: "~/plugins/job-card", ssr: false },
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: ["#nuxtjs/pwa"],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
"#nuxtjs/axios",
"#nuxtjs/pwa",
"#nuxtjs/dotenv",
"#nuxtjs/style-resources",
"#nuxtjs/auth",
"vue-sweetalert2/nuxt",
"#nuxtjs/sitemap",
"#nuxtjs/robots",
],
manifest: {
name: "Reqruit",
short_name: "Reqruit",
lang: "id",
display: "standalone",
},
styleResources: {
// your settings here
scss: ["~assets/scss/abstracts/_variables.scss"],
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {
baseURL: process.env.API_BASE_URL,
},
auth: {
redirect: {
login: "/auth/login",
logout: "/auth/login",
callback: "/auth/login",
home: "/account/edit-profile",
},
strategies: {
local: {
endpoints: {
login: {
url: "/login",
method: "post",
propertyName: "token",
},
logout: { url: "/logout", method: "post" },
user: {
url: "/user-data",
method: "get",
propertyName: "data",
},
},
},
},
},
pageTransition: {
name: "page",
mode: "out-in",
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
optimization: {
splitChunks: {
chunks: "async",
},
},
splitChunks: {
pages: true,
vendor: true,
commons: true,
runtime: true,
layouts: true,
},
extend(config, ctx) {},
standalone: true,
},
};
and here is my .env file
API_BASE_URL=http://phplaravel-568017-1969050.cloudwaysapps.com/api
BACKEND_BASE_URL=http://phplaravel-568017-1969050.cloudwaysapps.com
APP_BASE_URL=http://localhost:3000
EMPLOYER_BASE_URL=http://localhost:3001
NUXT_PORT=3000
APP_MODE=staging

Nuxt console.log() does not work although I set it in .eslintrc.js

I have a Nuxt application with .eslintrc.js file where I set up
rules: {
"no-console": "off"
},
I expect it enables the console methods and I would be able to write to console. But it is still blocked. I dont know where else to set this option. nuxt.config.js does not contain lint section. thnakx for any help.
EDIT: Here is the nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "lurity-portal-nuxt",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
server: {
port: process.env.PORT, // default: 3000
host: process.env.HOST, // default: localhost
},
modern: true,
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"#mdi/font/css/materialdesignicons.css",
"#/assets/scss/bulma_styled.scss",
"#/assets/scss/lurity.scss",
],
router: {
middleware: "auth",
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"~/plugins/helpers.js",
"~/plugins/apiCalls.js",
"~/plugins/vue-lazyload.client.js",
{ src: "~/plugins/vue-intersect.client.js", mode: "client" },
{ src: "~/plugins/gmaps.client.js", mode: "client" },
{ src: "~/plugins/google-auth.client.js", mode: "client" },
{ src: "~/plugins/google-tag-manager.client.js", mode: "client" },
{ src: "~/plugins/debounce.client.js", mode: "client" },
{ src: "~/plugins/braintree.client.js", mode: "client" },
{ src: "~/plugins/charts.client.js", mode: "client" },
{ src: "~/plugins/vuex-persist.client.js", mode: "client" },
{ src: "~plugins/leaflet.client.js", mode: "client" },
"~/plugins/map-location.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/eslint
"#nuxtjs/eslint-module",
"#nuxtjs/composition-api/module",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/buefy
"nuxt-buefy",
// https://go.nuxtjs.dev/axios
"#nuxtjs/axios",
"#nuxtjs/proxy",
[
"nuxt-i18n",
{
locales: [
{
code: "en",
iso: "en-GB",
file: "en_locale.js",
},
{
code: "sk",
iso: "sk-SK",
file: "sk_locale.js",
},
{
code: "cz",
iso: "cs-CZ",
file: "cs_locale.js",
},
],
defaultLocale: "en",
strategy: "no_prefix",
lazy: true,
vueI18n: {
silentTranslationWarn: true,
silentFallbackWarn: true,
},
langDir: "locales/",
// Enable browser language detection to automatically redirect user
// to their preferred language as they visit your app for the first time
// Set to false to disable
detectBrowserLanguage: {
// If enabled, a cookie is set once a user has been redirected to his
// preferred language to prevent subsequent redirections
// Set to false to redirect every time
useCookie: true,
// Cookie name
cookieKey: "i18n_redirected",
// Set to always redirect to value stored in the cookie, not just once
alwaysRedirect: false,
// If no locale for the browsers locale is a match, use this one as a fallback
fallbackLocale: "en",
},
},
],
],
buefy: { css: false, materialDesignIcons: false, defaultLocale: "sk-SK" },
proxy: {
// Simple proxy
"/api": {
target: `https://portal-api.lurity.com`,
},
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["vuex-stores"],
loaders: {
scss: {
sourceMap: true,
implementation: require("sass"),
additionalData: `#import "~#/assets/scss/_bulma_variables.scss"; #import "~#/assets/scss/variables.scss";`,
},
},
},
};

Nuxt static site - where is the markup?

I've set the mode to static and ran npm run generate. The site is being served from the /dist/ directory, but where is the markup when I view the source? view-source:https://eosnomad.com/
I don't think I'm getting the SEO benefits here since Google doesn't see HTML. I only see the source code when looking in dev tools. Am I doing this wrong?
Here is my nuxt configuration:
export default {
target: 'static',
head: {
title: process.env.DOMAIN,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content:
process.evn.CONTENT,
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
css: [],
plugins: [
{ src: '~/plugins/cookie-law', mode: 'client' },
{ src: '~/plugins/vue-agile', mode: 'client' },
{ src: '~/plugins/vue-js-modal', mode: 'client' },
{ src: '~/plugins/vue-formulate', mode: 'client' },
{ src: '~/plugins/vue-the-mask', mode: 'client' },
{ src: '~/plugins/route-to-hash', mode: 'client' },
{ src: '~/plugins/global-components', mode: 'client' },
],
components: true,
publicRuntimeConfig: {
baseSiteTitle: '${DOMAIN}',
siteID: '${WORDPRESS_SITE_ID}',
cmsEndpoint: process.env.IS_LOCAL
? 'https://dashboard${TLD_LOCAL}/${WORDPRESS_SITE_SLUG}/${WORDPRESS_ACF_ENDPOINT}'
: 'https://dashboard${TLD}/${WORDPRESS_SITE_SLUG}/${WORDPRESS_ACF_ENDPOINT}',
newsEndpoint: process.env.IS_LOCAL
? 'https://dashboard${TLD_LOCAL}/wp-json/getnews?property_id=${WORDPRESS_SITE_ID}'
: 'https://dashboard${TLD}/wp-json/getnews?property_id=${WORDPRESS_SITE_ID}',
},
tailwindcss: {
exposeConfig: true,
},
loading: false,
buildModules: [
'#nuxtjs/tailwindcss',
'#nuxtjs/pwa',
[
'#teamnovu/nuxt-breaky',
{
enabled: true,
enableInProd: false,
colorScheme: 'auto',
position: 'bottomRight',
},
],
],
modules: [
'#nuxtjs/axios',
'#nuxtjs/svg',
'nuxt-fontawesome',
'#nuxtjs/dayjs',
['vue-scrollto/nuxt', { duration: 1000, easing: 'ease-in-out' }],
],
dayjs: {
plugins: ['isSameOrAfter', 'isSameOrBefore'],
},
fontawesome: {
imports: [
{
set: '#fortawesome/free-solid-svg-icons',
icons: [
'faBullhorn',
'faSortUp',
'faSortDown',
'faUtensils',
'faEnvelopeOpenText',
'faArrowLeft',
'faArrowRight',
'faTimesCircle',
],
},
{
set: '#fortawesome/free-brands-svg-icons',
icons: ['faFacebookSquare', 'faTwitterSquare', 'faInstagram'],
},
],
},
webfontloader: {
typekit: {
id: 'XXXX',
},
},
render: {
bundleRenderer: {
shouldPreload: (file, type) => {
return ['script', 'style', 'font'].includes(type)
},
},
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {},
}
I got it. This is a single page website and I put all the components in the default layout file. In order to generate static markup properly it all needs to be in the index.vue file.

Why do I get an SSR encoding error in Nuxt JS when trying to add a custom class to the body element?

I'm facing an SSR encoding error in a Nuxt project, essentially what I'm trying to achieve is adding a custom class to the body element for a specific page.
Here's the implemented chunk of code:
export default {
components: {
PortfolioHeader,
Footer
},
head: {
bodyAttrs: {
class: 'portfolio'
},
script: [
{
src: 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
}
]
},
data() {
return {
apiURL: this.$config.apiUrl,
currentPortfolio: this.$store.state.portfolios.filter( portfolio => portfolio.title.toLowerCase() === 'busvel' )[0]
}
}
}
An this is what I get in the DOM generated code:
<body class="" data-n-head="%7B%22class%22:%7B%22ssr%22:%22%22%7D%7D" cz-shortcut-listen="true">
This is my nuxt.config.js:
export default {
mode: "universal",
target: "server",
dev: process.env.APP_ENV !== "production",
vue: {
config: {
productionTip: true,
devtools: true
}
},
server: {
host: "0.0.0.0"
},
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL || "http://localhost:3000",
apiUrl: process.env.API_URL || "http://localhost:1337"
},
head: {
title: process.env.npm_package_name || "",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
},
{
hid: "description",
name: "description",
content: process.env.npm_package_description || ""
}
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Mulish:wght#400;600;800;900&display=swap" }
]
},
css: ["slick-carousel/slick/slick.css"],
plugins: [
"#/plugins/vue-typed.js",
{ src: "~/plugins/vue-typed.js", mode: "server" },
{ src: "~/plugins/vue-slick.js", mode: "client" },
{ src: "~/plugins/vue-parallax.js", mode: "client" }
],
components: true,
buildModules: ["nuxt-gsap"],
modules: [
// Doc: https://bootstrap-vue.js.org
"bootstrap-vue/nuxt",
"#nuxtjs/axios",
"#nuxtjs/style-resources",
"#nuxtjs/proxy"
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
styleResources: {
scss: ["~assets/scss/_colors.scss", "~assets/scss/_bootstrap.scss"]
},
build: {
devtools: true,
html: {
minify: {
minifyCSS: process.env.APP_ENV === "production" ? true : false,
minifyJS: process.env.APP_ENV === "production" ? true : false
}
},
optimization: {
minimize: process.env.APP_ENV === "production" ? true : false
},
postcss: {
sourceMap: true
},
loaders: {
css: {
sourceMap: true
},
scss: {
sourceMap: true,
sassOptions: {
outputStyle: "compressed"
}
}
},
extend(config, ctx) {
if (ctx.isClient) {
config.devtool = "#source-map";
}
}
}
};
Please help me out if you've already faced this problem or if you know the cause of this bug.

Where vue-cli-service put the bundle files?

I am trying to debug a Vue application and all I have is vue-cli-service-serve which does not give me any information about what it does.
I would like to access the public folder. Where can I find it?
I have this vue.config.js:
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
pages: {
index: {
entry: 'src/index.js',
template: 'public/index.html',
filename: 'index.html'
}
},
devServer: {
clientLogLevel: 'warning',
hot: true,
contentBase: 'dist',
compress: true,
open: true,
overlay: { warnings: false, errors: true },
publicPath: '/',
quiet: true,
watchOptions: {
poll: false,
ignored: /node_modules/
}
},
chainWebpack: config => {
config.plugins.delete('prefetch-index'),
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
args.compilerOptions.whitespace = 'preserve'
})
},
productionSourceMap: false,
assetsDir: './assets/',
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{ from: 'src/assets/img', to: 'assets/img' },
{ from: 'src/assets/logos', to: 'assets/logos' },
{ from: 'src/assets/fonts', to: 'assets/fonts' }
],
}),
]
}
}