feat(vue-app): add <client-only> alias for <no-ssr> (#5941)

packages/vue-app/package.json

@@ -16,6 +16,7 @@
     "unfetch": "^4.1.0",
     "vue": "^2.6.10",
     "vue-meta": "^2.0.4",
+    "vue-client-only": "^2.0.0",
     "vue-no-ssr": "^1.1.1",
     "vue-router": "^3.0.7",
     "vue-template-compiler": "^2.6.10",

packages/vue-app/src/index.js

@@ -20,7 +20,6 @@ export const template = {
     'components/nuxt-link.server.js',
     'components/nuxt-link.client.js',
     'components/nuxt.js',
-    'components/no-ssr.js',
     'views/app.template.html',
     'views/error.html'
   ]

packages/vue-app/template/components/no-ssr.js

@@ -1,9 +0,0 @@
-/*<%= isTest ? ' @vue/component' : '' %>
-** From https://github.com/egoist/vue-no-ssr
-** With the authorization of @egoist
-*/
-import NoSsr from 'vue-no-ssr'
-export default {
-  ...NoSsr,
-  name: 'NoSsr'
-}

packages/vue-app/template/index.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 import Meta from 'vue-meta'
+import ClientOnly from 'vue-client-only'
+import NoSsr from 'vue-no-ssr'
 import { createRouter } from './router.js'
-import NoSsr from './components/no-ssr.js'
 import NuxtChild from './components/nuxt-child.js'
 import NuxtError from '<%= components.ErrorPage ? components.ErrorPage : "./components/nuxt-error.vue" %>'
 import Nuxt from './components/nuxt.js'
@@ -15,8 +16,19 @@ import { setContext, getLocation, getRouteData, normalizeError } from './utils'
 <% }) %>
 <%= isTest ? '/* eslint-enable camelcase */' : '' %>
 
-// Component: <NoSsr>
-Vue.component(NoSsr.name, NoSsr)
+// Component: <ClientOnly>
+Vue.component(ClientOnly.name, ClientOnly)
+// TODO: Remove in Nuxt 3: <NoSsr>
+Vue.component(NoSsr.name, {
+  ...NoSsr,
+  render(h, ctx) {
+    if (process.client && !NoSsr._warned) {
+      NoSsr._warned = true
+      console.warn(`<no-ssr> had been deprecated and will be removed in Nuxt 3, please use <client-only> instead`)
+    }
+    return NoSsr.render(h, ctx)
+  }
+})
 
 // Component: <NuxtChild>
 Vue.component(NuxtChild.name, NuxtChild)

yarn.lock

@@ -11493,6 +11493,11 @@ vue-class-component@^7.0.1:
   resolved "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.1.0.tgz#b33efcb10e17236d684f70b1e96f1946ec793e87"
   integrity sha512-G9152NzUkz0i0xTfhk0Afc8vzdXxDR1pfN4dTwE72cskkgJtdXfrKBkMfGvDuxUh35U500g5Ve4xL8PEGdWeHg==
 
+vue-client-only@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
+  integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
+
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"