Server plugin only
I have a plugin that I don't want the client to see. Unfortunately it is always built for both the server and client. How can this be prevented?
<template>
<div>
Test
</div>
</template>
<script>
import getAll from '~/plugins/api'
export default {
asyncData (context, callback) {
getAll(function(data){
callback(null,data);
})
}
}
</script>
This is my .vue file. Fetching the data works, but I can also look at the client side code which I don't want.
source to share
Maybe you can use the property context.isServer
.
This is a boolean value that lets you know if you are actually rendering from the server side.
<script>
import getAll from '~/plugins/api'
export default {
asyncData (context, callback) {
if (context.isServer) {
getAll(function(data){
callback(null,data);
})
}
}
}
</script>
More on Nuxt context here: https://nuxtjs.org/api/context
update: (thanks @Lanayx)
"Note: As of Nuxt.js 2.4, the mode was introduced as a plugin option to specify the plugin type, the possible values are client or server. Ssr: false will be adapted to the mode:" client "and will be deprecated in the next major release."
// nuxt.config.js:
export default {
plugins: [
{ src: '~/plugins/both-sides.js' },
{ src: '~/plugins/client-only.js', mode: 'client' },
{ src: '~/plugins/server-only.js', mode: 'server' }
]
}
source to share