João Jack
Steps to reduce SSR To Full Load
Hi,
My Nuxt 3 website has a 2 to 3s SSR to full load, and I’m not sure where to look to understand which elements are causing this.
Using Nuxt DevTools, which part should I focus on to identify the components causing such a delay?
My homepage is quite heavy on Apollo/GraphQL calls, but in terms of milliseconds, it’s almost negligible.
Looking at my server hooks, I see a rather large "build" part (1,7 seconds) , but it’s still too vague for me to understand.
Could you suggest some directions to look at?
My config:
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"start": "node .output/server/index.mjs",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxtjs/fontaine": "^0.4.3",
"@nuxtjs/google-fonts": "^3.2.0",
"@nuxtjs/i18n": "^8.5.5",
"@nuxtjs/robots": "^4.0.2",
"@nuxtjs/seo": "^2.0.0-rc.18",
"@nuxtjs/sitemap": "^6.0.0-beta.1",
"@pinia/nuxt": "^0.5.1",
"@vueuse/components": "^10.11.0",
"@vueuse/core": "^10.11.0",
"@vueuse/nuxt": "^10.11.0",
"@yeger/vue-masonry-wall": "^5.0.12",
"graphql-tag": "^2.12.6",
"gsap": "npm:@gsap/shockingly@^3.12.5",
"nuxt": "^3.12.3",
"nuxt-easy-lightbox": "^1.0.2",
"nuxt-swiper": "^1.2.2",
"pinia": "^2.1.7",
"vue": "^3.4.31"
},
"devDependencies": {
"@nuxtjs/apollo": "^5.0.0-alpha.14",
"@nuxtjs/tailwindcss": "^6.12.1"
}
}6 replies
index.html not generated on npm run generate
Hi, I have a single page app with only index.vue as page, and when i run npm run generate, the .output/public folder only contains the _nuxt folder filled with assets and js, and the favicon... No index.html file and i need it for my static hosting.
My nuxt config :
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'],
build: {
transpile: ['gsap'],
},
googleFonts: {
families: {
Montserrat: true,
}
}
})
Could you provide any help ? Thanks !2 replies
redirect-ssl
Hello, I can't correclty configure redirect-ssl on Nuxt 3 (I've read every tutorial I could, and my most recent setup is this :
import { defineNuxtConfig } from 'nuxt/config'
import redirectSSL from 'redirect-ssl'
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss','@formkit/auto-animate','@vueuse/nuxt','@nuxtjs/google-fonts','@unocss/nuxt'],
serverMiddleware: [
redirectSSL.create({
enabled: process.env.NODE_ENV === 'production'
}),
],
Could somebody give me a hint about this ? Thanks !1 replies
Plugin install
Hello, I tried to install a vue 3 compatible plugin :
in plugins/vue-vimeo-player.client.js :
import {vueVimeoPlayer} from 'vue-vimeo-player'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VueVimeoPlayer', vueVimeoPlayer);
nuxtApp.vueApp.use(vueVimeoPlayer)
})
i use it like this in a component :
<ClientOnly>
<VueVimeoPlayer v-if="largerThanMd" ref="player" class=" mx-auto md:my-auto w-full bg-black" :options="myOptions" :video-id="videoId"/>
</ClientOnly>``
but i get this warning in console and can't get rid of it. Do you know why ?
runtime-core.esm-bundler.js:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn2 @ runtime-core.esm-bundler.js:38
use @ runtime-core.esm-bundler.js:4356
(anonyme) @ vue-vimeo-player.client.js:5
`9 replies