Comments (29)
Hi,
Yes, this is exactly due to the server-side rendering.
If you need to specify that you want to import a ressource only on the client-side inside, you need to you process.browser
variable.
.vue file
<script>
if (process.browser) {
require('aframe')
}
export default {
}
</script>
nuxt.config.js
build: {
vendor: ['aframe']
}
Thanks for your report, the documentation of the website will be completed soon.
from nuxt.js.
Vue-FullCalendar
app/plugins/vue-fullcalendar.js
import Vue from 'vue'
if (process.browser) {
window.onNuxtReady(() => {
const VueFullCalendar = require('vue-fullcalendar')
Vue.use(VueFullCalendar)
})
}
from nuxt.js.
I know this issue is closed and all, but I just want to point out an alternate solution - Vue's lifecycle hooks. All hooks except for beforeCreate
and created
do not even run on the server. If you're doing any client-side manipulation or inspection and referencing built-in browser globals like window
or document
, then you should do those things in these hooks. This solution removes the need to inspect environment variables.
from nuxt.js.
from nuxt.js.
Currently, nuxt.js 1.0.0-rc11
, it is process.browser
and not process.BROWSER_BUILD
inside a component.
from nuxt.js.
I have experinced similar issues as well. I was trying to import a vue UI framework element-ui
. However, it references window object and several native browser functions like addEventListener
etc., so it breaks the server rendering. I'm thinking if there is any way to polyfill it somehow. Because for such kind of UI framework, if we cannot render it on server side, it doesn't quite make sense and is probably not usable for SEO purpose.
I've also treid next.js
with antd
( a UI framework built on React.js
which similar to element-ui
) and it worked almost perfectly ( except that next.js
is using glamor
as a css-in-js
solution which is pretty hacky). When I have time I'll dig more for the reason why it's working in next.js
but not nuxt.js
.
from nuxt.js.
Thanks @atinux. I also found I can use import by moving my code out from the page into a component and use ssr: false when loading that plugin in the nuxt.config.js.
@andrewharvey could you provide more details or an example of this implementation using the import
statement?
from nuxt.js.
I think that every vue plugin should be able to work both client-side and server-side since the version 2.0 of Vue.js.
I asked the team behind element-ui
but they said it's not their priority, but I don't think it will be complicated to make it compatible with server-side rendering, since we will only have to add if
statement where a client-side only function is called.
@andyhu what library are you talking about which is working with next.js but not nuxt.js?
from nuxt.js.
@atinux I mean I'm pretty sure that antd
has some window
object references as well. But when I tried it, it did work with next.js
. However it probably because that antd
is more modular and I missed the browser specific part of the variable references. Anyway I'm going to test more.
Update: I've found that in antd
it's using if (typeof window !== 'undefined')
to check if it's in the browser. So as you said, it's the plugin's issue and it shouldn't directly reference window
object without envirument detection. element-ui
IMO is a bit buggy.
from nuxt.js.
Hi,
Yes, this is exactly due to the server-side rendering.
If you need to specify that you want to import a ressource only on the client-side inside, you need to you process.BROWSER_BUILD variable.[...]
why is this still not in the docs? I followed what was there and was still having issues importing a vue plugin. this solution cleared things up
the plugin in question: https://github.com/Wanderxx/vue-fullcalendar
from nuxt.js.
This is the best answer I've ever seen. Thanks
from nuxt.js.
I'm closing this issue since the question has been answer by @alexchopin by using process.BROWSER_BUILD.
How would that work if we are using import instead of require? If I put my import inside the if statement I get:
NuxtServerError Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level
from nuxt.js.
You have to use require
at the moment @andrewharvey and ask for the library author to add SSR support (by giving him this link if it's a Vue.js library: https://ssr.vuejs.org/en/universal.html)
from nuxt.js.
The only way I found to make scripts load only on the client side is to require them in one of the hooks that are not executed on the server side.
So for example with mapbox-gl
you first set a parameter mapboxgl
into the data ()
object. Then inside your hook (for example mounted ()
) you require mapbox-gl
and assign it to the new parameter.
<script>
export default {
data () {
return {
mapboxgl: null
}
},
mounted () {
this.maboxgl = require('mapbox-gl')
}
}
</script>
from nuxt.js.
Ah ha, brilliant! Thanks!
from nuxt.js.
Hmm a-frame doesn't play nice with vue. It doesn't load properly.
from nuxt.js.
I hope they will add theses check so element-ui
could be used on the server-side too and render the proper HTML code!
I'm closing this issue since the question has been answer by @alexchopin by using process.BROWSER_BUILD
.
from nuxt.js.
I have a follow up question that is a bit relevant to this issue and didn't want to clutter up the project by opening another one. I have code that needs to query browser-specific media and streaming capabilities. Where would that code best be located such that it is guaranteed to run when the component appears on the client side (whether it has previously been rendered by the server or not). I imagine this is also an issue for anyone trying to integrate with WebGL and other WebAPI technologies. Anyone have some advice?
from nuxt.js.
@dkushner we have a special option for JS to be run only on client-side with ssr: false
option: https://nuxtjs.org/guide/plugins#client-side-only
from nuxt.js.
@atinux, perfect thanks! Just happened to miss that portion of the docs.
from nuxt.js.
@atinux, actually I'm sorry it looks like that documentation is explicitly for Vue plugins. Do I need to wrap every external library I use as a Vue plugin in order to leverage this? For instance THREE and SocketIO will both rely on UA-specific objects being present like document
and window
. So do each of these libraries then become a separate plugin?
from nuxt.js.
@dkushner yep
from nuxt.js.
You have to use require at the moment @andrewharvey and ask for the library author to add SSR support (by giving him this link if it's a Vue.js library: https://ssr.vuejs.org/en/universal.html)
Thanks @atinux. I also found I can use import by moving my code out from the page into a component and use ssr: false
when loading that plugin in the nuxt.config.js.
from nuxt.js.
@yun313350095 I tried process.browser
but it didn't work. However, process.BROWSER_BUILD
is working fine for me.
But is this real solution? I mean, I have to put this if block every method, where I want to something for client-side interaction.
@andrewharvey, for i18n plugin, i did same changes like nuxt.config.js -
{ src: '~plugins/i18n.js', ssr: false },
but now i am getting error as fallbackLocale is undefined.
from nuxt.js.
Hello, I'm very confused and having really bad times 😞
What if, I have to add some components after the first contentful paint ?
I've something like this:
<no-ssr>
<div id="post-footer">
<post-share/>
<div class="post-footer-suggestions" v-if="suggestionToShow">
<p class="h2">ToRead</p>
<post-suggestion/>
</div>
</div>
</no-ssr>
But I can't figure out how to load these components in front...
// vue instance
components: {
// What I have to do?
}
Any help would be appreciated
from nuxt.js.
@EmixMaxime
<script>
import postShare from '~/components/anotherFolder/postShare.vue'
export default {
components: {
postShare
}
</script>
in HTML,
<div id="post-footer">
<postShare />
</div>
Hope this will help
from nuxt.js.
@sudhir600 Hum, that's loads the component in the server side, I have the window undefined
error.
from nuxt.js.
You have to lazy-import your components only when the code is running on the client, like this:
<script>
export default {
components: {
postShare: process.client && import('~/components/anotherFolder/postShare.vue')
}
</script>
from nuxt.js.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from nuxt.js.
Related Issues (20)
- iOS white screen while swiping back after scrolling HOT 1
- Add example to NuxtLink documentation for passing params to dynamic routes
- Vite Pre-transform error: on Nuxt 3.11 with images in public directory with query param HOT 1
- Nuxt module dynamic imports not working in build mode HOT 1
- Show compatibility flag when starting the server
- routeRules /** swr crashed ipx provider HOT 2
- Warning will appear when passing an external link to `<NuxtLink>` HOT 3
- In original code is using "renderToString", I want to use "renderToNodeSteam", what should I do? HOT 1
- asyncContext on development is dead in nightly build HOT 1
- Nuxt 3 - build ends with SIGKILL HOT 2
- Page scrolls to top after reloading page and then restores the scroll position" HOT 2
- routeRules doesn't work HOT 12
- Add ability to configure HMR port
- FOUC in Production since Nuxt 3.10.0 HOT 1
- navigateTo not working inside defineNuxtPlugin on initial render HOT 3
- Page navigation shows warning - Component is already mounted, please use $fetch instead HOT 2
- "How to Set Server Cookie in Nuxt 2, Multiple Users Requesting at the Same Time is a Confusion Problem" HOT 4
- createError from server middleware does not use /error.vue HOT 3
- Zod Async Refine always returning false HOT 5
- Using `getCachedData` together with `await useLazyAsyncData` causing it to not be pending anymore
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.js.