result of Nuxt build are break - vue.js

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

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 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.

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) {}
}
}

Adding cdn stylesheets and javascripts in nuxt.js

Hi I cannot add fontawesome to my nuxt app I have try adding it in the nuxt.config.js and it still does not seem to work.
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/leap-icon.ico' },
{ rel: 'stylesheet', ref: 'https://use.fontawesome.com/releases/v5.2.0/css/all.css' }
]
},
Below is the correct method to implement external resource in nuxt.
link: [{ rel:"stylesheet", type:"text/css", href:'http://www.example.com/assets/lib/bootstrap/css/bootstrap.min.css' }]
I think just changing type to href should fix it. e.g.
{ rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.2.0/css/all.css' }