How can I turn off SSR for only certain pages in Nuxt.js to use them as SPA application?
You could do that via server middleware
export default function(req, res, next) { const paths = ['/', '/a'] if (paths.includes(req.originalUrl)) { // Will trigger the "traditional SPA mode" res.spa = true } // Don't forget to call next in all cases! // Otherwise, your app will be stuck forever :| next()}https://blog.lichter.io/posts/selectively-enable-ssr-or-spa-mode-in-a-nuxtjs-ap
Wrap the contents of the component you don't want to render server side in a <no-ssr></no-ssr> tag.
@DenisTsoi's link should give you more information on how it works.
If your Nuxt version >v2.9.0, then use <client-only> instead of <no-ssr>.
Here is an example:
<template> <div> <sidebar /> <client-only placeholder="Loading..."> <!-- this component will only be rendered on client-side --> <comments /> </client-only> </div></template>The Loading... is used as a placeholder until the component(s) within <client-only> is mounted on client-side.
You can learn more about this here: Nuxt API - The <client-only> Component