Nuxt static site - where is the markup? - seo

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.

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 does not optimize static site

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"
]
},
}

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";`,
},
},
},
};

result of Nuxt build are break

I have tried build Nuxt with Nuxt generate and Nuxt build
those are not build properly
it seem like break
when I use in dev, it was work perfectly
but after I build it and run it, the 3rd party component and css not work at all,
is this because of my nuxt.conf.js wrong ??
I have asked this before but nothing solve yet,
here is my nuxt.config.js
export default {
mode: 'universal',
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
script: [
{
src: 'https://kit.fontawesome.com/d0ddd22222fa871ae5.js',
crossorigin: 'anonymous'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Quando&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Palanquin&display=swap'
}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'#/assets/css/main.css',
'#/assets/css/input.css',
'#/assets/css/animate.css'
],
plugins: [
{ src: '#/plugins/agile.js', mode: 'client' },
{ src: '#/plugins/model-gltf.js', mode: 'client'},
],
router: {
middleware: ['router'],
},
buildModules: [
],
modules: [
'bootstrap-vue/nuxt',
'#nuxtjs/axios'
],
axios: {
baseURL: "http://myapi"
},
build: {
vendor: ['vue-agile', 'vue-3d-model'],
extend(config, ctx) {
}
}
}
can anyone here save my time please

NuxtJS - webpack. How to split vendors and app to separate css chunks?

I am trying to configure nuxt.config.js so that vendor and all the other styles would be separated into vendors.css and app.css chunks. This is how my nuxt.config.js looks now:
mode: 'universal',
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
loading: { color: '#fff' },
css: [
'#/assets/style/vendors.scss',
'#/assets/style/app.scss'
],
plugins: ['#/plugins/buefy'],
buildModules: [
'#nuxtjs/eslint-module'
],
modules: [
'#nuxtjs/axios',
'#nuxtjs/style-resources'
],
axios: {},
build: {
styleResources: {
scss: './assets/style/utilities.scss'
},
extractCSS: true,
extend(config, ctx) {}
}
}