I don't understand why my app has meta robots set to noindex when I'm in production mode only ??
Here is my nuxt.config
import i18n from './config/i18n'
export default {
head: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ hid: 'robots', name: 'robots', content: 'index, follow' }
],
},
buildModules: ['nuxt-lazysizes',
[
'nuxt-i18n',
{
strategy: 'prefix_except_default',
defaultLocale: 'en',
seo: true,
baseUrl: envBaseUrl,
locales: [
{
code: 'en',
name: 'English',
iso: 'en-GB'
},
{
code: 'fr',
name: 'Français',
iso: 'fr-FR'
}
],
vueI18n: i18n
}
]
],
env: {
baseUrl: envBaseUrlAdmin
},
}
I even set the meta in the layout /default.vue just in case, but still the same.
This is driving me insane !!
It's perfectly fine in dev mode. Why would any one want production with no index and dev or staging with it ? This is absurd.
head () {
return {
meta: [{ hid: 'robots', name: 'robots', content: 'index, follow' }],
}
}
Ok, it was a conflict with my Yoast plugin. Haven't found why it was only doing this in prod, and not in dev, but it's fine now. Sorry for the dumb question.
Related
hi I have nuxt app it work good and fast in pc but in phone is to slow I use vuetify in my app And I'm suspicious of this :) (The reason for the slowness of app is vuetify)
It seems to involve RAM and CPU, and because the phone is weaker, it slows down drastically.
how can I increment performance on phone .
for example it load 1s in pc but in phone it load 4s
and if it load 5s in pc in phone load 14s
is is my nuxt.config
export default {
ssr: false,
loadingIndicator: '~/static/html/loading.html',
head: {
titleTemplate: '%s | ****',
title: '****',
htmlAttrs: {
lang: 'fa',
},
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' }],
},
css: [
'#/static/fonts/Ter/css/style.css',
'#/static/css/main.css',
'#/static/fonts/fontawesome/css/all.css',
],
plugins: [
{
src: '#/plugins/drag.js',
ssr: false,
},
{
src: '#/plugins/ft.js',
ssr: false,
},
{
src: '#/plugins/particles',
ssr: false,
},
{
src: '#/plugins/axios.js',
ssr: false,
},
{
src: '#/plugins/lang.js',
},
{
src: '#/plugins/vuetify.js',
},
{
src: '#/plugins/Analytics.js',
ssr: true,
},
{
src: '#/plugins/Carousel3d.js',
ssr: true,
},
{
src: '#/plugins/EventBus.js',
},
],
components: true,
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth',
'#nuxtjs/sitemap',
'#nuxtjs/robots',
'nuxt-i18n',
],
i18n: {
defaultLocale: 'fa',
lazy: true,
langDir: '~/langs',
locales: [
{ code: 'en', name: 'english', iso: 'en-US', file: 'en.js', dir: 'ltr' },
{ code: 'fa', name: 'پارسی', iso: 'fa-IR', file: 'fa.js', dir: 'rtl' },
{ code: 'ar', name: 'العربی', iso: 'ar-QA', file: 'ar.js', dir: 'rtl' },
],
},
robots: {
UserAgent: '*',
Disallow: '/dashboard',
},
sitemap: {
hostname: 'https://****/',
exclude: ['/forget-password'],
},
axios: {
// baseURL: 'https://****/api/',
// baseURL: 'https://****/api/',
baseURL: 'http://****/api/',
headers: {
common: {
customer: 'true',
},
},
},
env: {
baseURL: 'http://****/',
selfURL: 'https://****/',
cookieURL: 'localhost',
},
build: {
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,
},
},
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: 'link/verification',
method: 'post',
propertyName: 'access_token',
},
user: false,
},
token: {
maxAge: 60 * 60,
},
autoFetchUser: false,
},
},
},
}
This kind of question cannot be answered easily with just that. Improving performance can take a lot of analysis, can come from various places and is a broad topic.
Here is two of my answers on this subject (still relevant in your case):
How to increase speed performance in Nuxt with SSR
How to improve the LCP score of my Nuxt site?
Few things we can note on your nuxt.config.js:
using ssr: false is basically fallback'ing to a pure SPA behavior, so the initial loading time may be quite slow (as always, it depends also on how you measure it)
loading global CSS (css key) can be a penalty too
all of the plugins you're loading are adding to the bundle-size (and hence, increase the loading time), maybe think to load some of them locally
ssr: false is legacy, please use mode: 'client'
also, checking for some smaller alternatives may be interesting too (are tho 37kB of JS worth it?)
Other than this, there is also your overall code, some middleware, some 3rd party like Google analytics, the list goes on and on.
But I think you have a decent starting point with this.
I am developing an application with NuxtJS and SSR, I am also using axios and auth modules. Everything works perfectly in localhost, but later when I upload the application to the host (Vercel) and try to log in, it gives me the 405 error. Does anyone know why this happens? The server is created with express
Error: Request failed with status code 405
at t.exports (237de42.js:2)
at t.exports (237de42.js:2)
at XMLHttpRequest._.onreadystatechange (237de42.js:2)
This is my nuxt.config.js file:
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
ssr: true,
// Global page headers: https://go.nuxtjs.dev/config-head,
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth-next',
'~/modules/api/index.js'
],
env:{
baseUrl: process.env.BASE_URL
},
axios: {
credentials: true,
https: true,
baseURL: 'https://www.encontrarhogar.com.ar/',
init(axios) {
axios.defaults.withCredentials = true
}
},
head: {
title: 'Encontrar Hogar',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: '/normalize.css' },
{ rel: 'stylesheet', href: "https://unpkg.com/swiper/swiper-bundle.min.css" }
],
script: [
{ src: "https://kit.fontawesome.com/57d52ad1ee.js", crossorigin: "anonymous" },
]
},
loading: {
color: 'black',
height: '8px',
continuous: true
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'#/assets/css/index.css'
],
auth: {
strategies: {
local: {
token: {
property: 'token'
},
user: {
property: 'user'
},
endpoints: {
login: { url: '/server/api/usuarios/login', method: 'post', propertyName: 'data' },
user: { url: '/server/api/usuarios/mi-perfil', method: 'get', propertyName: 'data' },
logout: { url: '/server/api/usuarios/logout', method: 'delete' }
}
}
}
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['~/plugins/swiper.js'],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true
}
I'm having a problem configuring the serverMIddleware property, everything works perfectly, but I can't create any other route than the initial route
Mi nuxt.config.js file:
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
ssr: true,
// Global page headers: https://go.nuxtjs.dev/config-head,
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth-next',
// '~/modules/api/index.js'
],
serverMiddleware:[
{ path: '/api', handler: '~/api/index.js'},
],
axios: {
baseURL: 'http://localhost:3000/',
},
head: {
title: 'Encontrar Hogar',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Encontra tu nuevo hogar en chacabuco. Todas las propiedades e inmuebles de Chacabuco en un mismo lugar' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: '/normalize.css' },
{ rel: 'stylesheet', href: "https://unpkg.com/swiper/swiper-bundle.min.css" }
],
script: [
{ src: "https://kit.fontawesome.com/57d52ad1ee.js", crossorigin: "anonymous" },
]
},
loading: {
color: 'black',
height: '8px',
continuous: true
},
css: [
'#/assets/css/index.css'
],
auth: {
cookie:{
options:{
secure: true
}
},
strategies: {
local: {
token: {
property: 'token'
},
user: {
property: 'user'
},
endpoints: {
login: { url: '/api/usuarios/login', method: 'post', propertyName: 'data' },
user: { url: '/api/usuarios/mi-perfil', method: 'get', propertyName: 'data' },
logout: false
}
}
}
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['~/plugins/swiper.js'],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true
}
/api/index.js file:
const bodyParser = require('body-parser')
const app = require('express')()
app.get('/api/:id?', (req, res) => res.send('hello'))
module.exports = app
If I try to create endpoints like the one that I will leave below, the only thing I get when making the get requests through the browser or postman is a 404 not found response, I do not understand what I am configuring wrong.
app.get('/api/products', (req, res) => res.send('products'))
Did you call http://localhost:3000/api/youridhere ?
According to your configuration and serveMiddleware, your link should be http://localhost:3000/api/api/youridhere
You have static target, change to "server" if you want serverMiddleware to work
I have a Manifest with stuff like name etc. which also instantly brings out meta tags for my page. Now I wanna use Meta Tags on my individual Pages, the problem is that the Manifest Meta Tags dont get overwritten which leads to them having higher priority for sites like Facebook etc.
Example Manifest:
manifest: {
theme_color: '#1a1a1a',
name: 'Stackoverflow',
short_name: 'SO',
description: 'Questions and Answers',
lang: 'de'
},
Example change in the Page:
head () {
return {
meta: [
{ name: 'og:url', content: 'www.notstackoverflow.com' },
{ name: 'og:type', content: 'article' },
{ name: 'og:title', content: this.post.titel },
{ name: 'og:description', content: this.post.subtitel },
]
}
},
The problem is that it still uses the title and description from the manifest instead of the page. It only adds the ones from the page after the manifest ones if I go on View Source.
(Nuxt + PWA Module)
you must add the hid property for each meta:
head () {
return {
meta: [
{ hid: 'og:url', name: 'og:url', content: 'www.notstackoverflow.com' },
{ hid: 'og:type', name: 'og:type', content: 'article' },
{ hid: 'og:title', name: 'og:title', content: this.post.titel },
{ hid: 'og:description', name: 'og:description', content: this.post.subtitel },
]
}
},
see https://nuxtjs.org/faq/duplicated-meta-tags
To avoid any duplication when used in child component, please give a unique identifier with the "hid" key.
I am looking for ways to refactor this:
nuxt.config.js
const headConfig = require('./config/head')
const modulesConfig = require('./config/modules')
const config = {
head: headConfig,
(...)
}
module.exports = Object.assign({}, config, modulesConfig)
config/head.js
module.exports = {
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'fb:app_id', content: 'xxxx'},
{hid: 'og:url', name: 'og:url', content: 'xxxx'},
{hid: 'og:type', name: 'og:type', content: 'website'},
{hid: 'og:image', name: 'og:image', content: 'xxxx'},
{hid: 'og:site_name', name: 'og:site_name', content: 'xxxx'},
{hid: 'keywords', name: 'keywords', content: 'xxxx'}
]
}
An example of what I'd like to be able to do is to automatically set the 'og:url' to the url of the page. There is no need to repeat that every time.
At the moment I include this in each page of my Nuxt.js app:
{
hid: 'og:url',
property: 'og:url',
content: 'https://website.com' + this.$route.fullPath
},
I am sure there is a better way to automatically set that somewhere :/
Probably your best bet would be to create a global Mixin:
https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin
This should allow you to create a head mixin that will be auto-imported into every component, so you could define that og:url once and have it auto-injected everywhere.
Here's an example of how you'd register it as a plugin with Nuxt:
/plugins/headMixin.js
import Vue from 'vue'
export default ({ route }) => {
Vue.mixin({
head() {
return {
meta: [
{
hid: `og:url`,
property: 'og:url',
content: 'https://www.yoursite.com' + route.fullPath
}
]
}
}
})
}
in nuxt.config.js:
plugins: [
'~/plugins/headMixin.js'
]
this is my way
in nuxt.config.js:
head: {
title: 'default title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'default description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
in default.vue
export default {
head() {
return {
title: `Company - ${this.$route.meta.title}`,
meta: [
{
hid: 'description',
name: 'description',
content: this.$route.meta.description
}
],
}
},
and if you use #nuxtjs/router in router.js
routes: [
{
path: '/page',
name: 'some',
meta: {
title: 'Best seo title',
description: 'Best seo description'
},
component: someComponent,
},
All the data you write in routes. Everything works perfectly.