I have had some trouble using socket.io client in Nuxt. When i create a socket.io client instance, multiple connections are created. I'm working with vue-socket.io, I had no problems until I needed to add options and create a socket.io client instance. I have tried other libraries and had the same problems.
I have it written in a plugin and import it into my nuxt.config
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
const options = {
transport: ["polling", "websocket"],
transportOptions: {
polling: {
extraHeaders: {
Authorization: '', //'Bearer h93t4293t49jt34j9rferek...'
}
}
} };
//This code working
// export default function () {
// Vue.use(new VueSocketIO({
// debug: false,
// connection: 'http://localhost:3001',
// }))
// }
//This code not Working
export default function () {
Vue.use(new VueSocketIO({
debug: false,
connection: SocketIO('http://localhost:3001', options),
}))
}
This shows the console. The problem is not the back, I tried with public sockets and I also have problems
[Nest] 4796 - 25/06/2021 11:30:28 a. m. [MessageGateway] Client connected: A6TOQpVNSI_b-d5sAAAJ
[Nest] 4796 - 25/06/2021 11:30:29 a. m. [MessageGateway] Client connected: 7FZyW_K9VtgI3_p1AAAK
[Nest] 4796 - 25/06/2021 11:30:31 a. m. [MessageGateway] Client connected: TN1hvjkkEN5vC7xEAAAL
[Nest] 4796 - 25/06/2021 11:30:36 a. m. [MessageGateway] Client connected: X8HUyvr3iJtWvPY7AAAM
[Nest] 4796 - 25/06/2021 11:30:41 a. m. [MessageGateway] Client connected: MniYR9ketxpmUWBZAAAN
nuxt.config
plugins: [
{ src: '#/plugins/apexchart.plugin.client.ts', mode: 'client', ssr: false },
{ src: '#/plugins/element-ui.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/vue-cryptoicon.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/v-calendar.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/api.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/dashboard.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/coins.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/wallets.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/accounting.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/deposits.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/investments.plugin.client.ts', mode: 'client', ssr: false},
{ src: '#/plugins/investments.plugin.client.ts', mode: 'client', ssr: false},
{ src: '~/plugins/socket.client.ts'},
],
Related
This is the TS code:
import WalletConnectProvider from "#walletconnect/web3-provider";
export const provider = new WalletConnectProvider({
infuraId: "e4ea80f8c3764a1ea0a582a4846d708c"
});
The browser console reports the following error:
Try adding this to vue.config.js:
module.exports = {
...
configureWebpack: {
resolve: {
fallback: {
assert: false,
stream: false,
os: false,
url: false,
http: false,
https: false,
buffer: require.resolve('buffer')
}
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: [ 'buffer', 'Buffer' ]
})
],
}
};
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 have created Nuxt.js application, I decided to build in Nuxt/auth module, everything works fine in web browsers, but somethimes when user navigates with mobile browser my application is crushed, simply it don't respond nothing, also there is no api calls, but after one refresh everything works fine, I can not guess what's happening, I could not find anything in the resources available on the Internet.
const axios = require('axios')
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'app',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
// { src: "//code-eu1.jivosite.com/widget/UoBOrMfSmm", async: true },
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [ '~/assets/css/transition.css', '~/assets/css/errors.css' ],
pageTransition: "fade",
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{ src: "~/plugins/star-rating", ssr: false },
{ src: "~/plugins/mask", ssr: false },
{ src: "~/plugins/rangeSlider", ssr: false },
{ src: "~/plugins/vueSelect", ssr: false },
{ src: "~/plugins/vuelidate", 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/google-analytics', {
id: 'xxx'
} ]
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/toast',
'#nuxtjs/auth-next',
[ 'nuxt-lazy-load', {
defaultImage: '/spin2.gif'
} ],
[ 'nuxt-facebook-pixel-module', {
/* module options */
track: 'PageView',
pixelId: '',
autoPageView: true,
disabled: false
} ],
'nuxt-moment',
'#nuxtjs/robots',
'#nuxtjs/sitemap'
],
moment: {
locales: ['ru', 'en']
},
toast: {
position: 'top-center',
},
robots: [
{
UserAgent: '*',
Disallow: ['/user', '/admin'],
},
],
axios: {
baseURL: 'https://api.test.com/', // Used as fallback if no runtime config is provided
},
sitemap:{
exclude:[
'/user',
'/admin',
'/admin/*',
'/user/*',
],
defaults: {
changefreq: 'daily',
priority: 1,
lastmod: new Date()
},
routes: async () => {
const { data } = await axios.get('https://api.test.com/api/cars/all')
return data.map((product) => `https://test.com/product/${product.id}/${product.name}`)
}
},
loading: {
color: '#F48245',
height: '4px'
},
target: 'server',
/* auth */
auth: {
plugins:[
{ src: "~/plugins/providers", ssr:false},
],
redirect: {
login: '/',
logout: '/',
home: '/',
callback: '/callback'
},
strategies: {
local: {
token: {
property: 'user.token',
},
user: {
property: false
},
endpoints: {
login: { url: 'api/login', method: 'post' },
logout: { url: 'api/logout', method: 'post' },
user: { url: 'api/user', method: 'get' }
},
},
facebook: {
endpoints: {
userInfo: 'https://graph.facebook.com/v6.0/me?fields=id,name,picture{url}',
},
redirectUri:'xxx',
clientId: '184551510189971',
scope: ['public_profile', 'email'],
},
google: {
responseType: 'token id_token',
codeChallengeMethod: '',
clientId: 'xxx',
redirectUri: 'https://test.com/callback',
scope: ['email'],
},
},
cookie: {
prefix: 'auth.',
},
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
};
This is my plugins directory file, where i am handling client oauth process.
export default async function ({ app }) {
console.log('auth executed')
if (!app.$auth.loggedIn) {
return
} else {
console.log('auth executed inside loop')
const auth = app.$auth;
const authStrategy = auth.strategy.name;
if (authStrategy === 'facebook') {
let data2 = {
fb_token: auth.user.id,
first_name: auth.user.name
}
try {
const response = await app.$axios.$post("/api/oauth", data2);
await auth.setStrategy('local');
await auth.strategy.token.set("Bearer " + response.user.token);
await auth.fetchUser();
} catch (e) {
console.log(e);
}
} else if (authStrategy === 'google') {
let dataGoogle = {
google_token: auth.user.sub,
first_name: auth.user.given_name,
last_name:auth.user.family_name
}
try {
const response = await app.$axios.$post("/api/oauth", dataGoogle);
await auth.setStrategy('local');
await auth.strategy.token.set("Bearer " + response.user.token);
await auth.fetchUser();
} catch (e) {
console.log(e);
}
}
}
}
For any issues related to DOM hydration, you can check my answer here: https://stackoverflow.com/a/67978474/8816585
It does have several possible cases (dynamic content with a difference between client side and server side rendered template, some random functions, purely wrong HTML structure etc...) and also a good blog article from Alex!
enter code here
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'myApp',
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' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['~/assets/css/transition.css'],
pageTransition: "fade",
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{src:'~/plugins/axios'},
{ src: '~/plugins/vue-fbauth.js', ssr: false },
{ src: '~/plugins/vue-google', ssr: false },
{ src: "~/plugins/vue2-editor", ssr: false },
{ src: "~/plugins/slider", ssr: false },
{ src: "~/plugins/star-rating", ssr: false },
{ src: "~/plugins/mask", ssr: false },
{ src: "~/plugins/imageUpload", ssr: false },
{ src: "~/plugins/fileUpload", ssr: false },
{ src: "~/plugins/rangeSlider", 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/google-analytics', {
id: 'UA-198003695-1'
}]
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
'#nuxtjs/axios',
'#nuxtjs/auth-next', ['nuxt-lazy-load', {
defaultImage: '/spin2.gif'
}],
'nuxt-moment',
'#nuxt/http'
],
axios: {
baseURL: 'https://example.com/api/book.', // Used as fallback if no runtime config is provided
},
loading: {
color: '#F48245',
height: '4px'
},
target: 'server',
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
router: { middleware: ['checkUserAuth'] },
}
//htaccess
RewriteEngine on
RewriteCond %{HTTP_HOST} ^my-domain.com.br$
RewriteRule "(.*.(jpg|gif|png|svg|js|css|woff2))$" "http://127.0.0.1:3000/$1" [P,NC]
RewriteRule ^(.*) "http://127.0.0.1:3000/$2" [P,L]
I have some problems when I use nuxt.js with SSR, my web application works perfect in development mode, but in production mode, I have some unexpected errors, Errors occur when pages are linked directly, for SSR I am using Nuxt with asyncData and I get the following kind of error.
My application runs to domain https://www.example.com/ and Backend API is https://www.api.example.com/api/book. What is happening, where is the problem.
I have two questions
Could the reason be the difference between the domains?
How can I avoid page crashes on Internal server error if I am using nuxt Axios module?
I'm using nuxt.js 2.9.1 for new project and I use some third party library like vue-select. in development mode everything works fine but in production mode the css will not load !!! i use npm run generate for generating project
css: [
'#neneos/nuxt-animate.css',
'#assets/fontawesome-pro-5.8.2-web/css/all.css',
'animate.css/animate.css',
'vue-select/dist/vue-select.css'
],
plugins: [
{
src: '~/plugins/vuex-persist',
ssr: false
},
{
src: '~/plugins/vee-validate'`enter code here`
},
{
src: '~/plugins/vue-select',
ssr: false
},
{
src: '~/plugins/vue-tooltip',
ssr: false
},
{
src: '~/plugins/axios'
},
{
src: '~/plugins/vue-tags-input',
ssr: false
},
{
src: '~/plugins/vue-masonry',
ssr: false
}
]
{
src: '~/plugins/vuex-persist',
mode: 'client',
ssr: false
},
or
{
src: '~/plugins/vuex-persist',
mode: 'server',
ssr: false
},
The problem is fixed by providing css file in head section of nuxt.config.js :
link: [{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
},
{
rel: 'preload',
as: 'style',
onload: "this.onload=null;this.rel='stylesheet'",
href: '/vue-select.css',
}
]
however it will be considered as a render blocking resource by google page inspection and this is SEO issue. so i will add these 3 properties:
rel: 'preload',
as: 'style',
onload: "this.onload=null;this.rel='stylesheet'",