Adding cdn stylesheets and javascripts in nuxt.js

Adding cdn stylesheets and javascripts in nuxt.js - vue.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' }

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

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

# How to set head og: in Nuxt

I got a problem, related to the head on nuxt js. I have a news website, when I enter the details page, I head code like bellow.
head() {
return {
title: 'Rumaholi.com - ' + this.news.title,
meta: [
{ hid: 'description', name: 'description', content: this.news.title },
{ hid: 'og:title', property: 'og:title', content: this.news.title },
{ hid: 'og:url', property: 'og:url', content: 'http://www.rumaholi.com/' + this.slug },
{ hid: 'og:image', property: 'og:image', content: this.news.image },
{ hid: 'og:description', property: 'og:description', content: this.news.title },
{ property: 'og:type', content: 'article' },
],
}
},
when I test on facebook dev, apparently my head uses index
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.rumaholi.com%2Fbuilder-as-bangun-motor-berlapis-emas-begini-penampakannya
head: {
title: 'Rumaholi.com - Home',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'keywords', content: 'Oli, Oli Motor, Oli Mobil, Oil, Car Oil, Automotive, News, News Automotive, Berita, Berita Automotive, Berita Otomotif'},
{ hid: 'description', name: 'description', content: 'Rumaholi.com - Berita Automotive | Berita Automotive National | Berita Automotive International' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/icon_LnO_icon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
}
]
},
please help fix the issue

We Keep Coding

sql objective-c vba vb.net react-native apache vue.js tensorflow api pandas

Adding cdn stylesheets and javascripts in nuxt.js - vue.js

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' }

Related

Cannot read properties of undefined (reading 'links')

Nuxt static site - where is the markup?

result of Nuxt build are break

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

# How to set head og: in Nuxt

Categories

Resources