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

[bluelovers]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #5941 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #5941   +/-   ##
=======================================
  Coverage   95.69%   95.69%           
=======================================
  Files          82       82           
  Lines        2693     2693           
  Branches      692      692           
=======================================
  Hits         2577     2577           
  Misses         98       98           
  Partials       18       18

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.27% <ø> (ø)	⬆️
#unit	92.68% <ø> (ø)	⬆️

Impacted Files	Coverage Δ
packages/vue-app/src/index.js	0% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2f3709c...b6521fe. Read the comment docs.

[Atinux]

Actually I thought about the same 👍

[kevinmarrec]

Makes sense to me 👍

[pimlie]

Does this mean that we are going to deprecate <no-ssr>?

[clarkdo]

How about adding alias in NoSsr and use Vue.component(NoSsr.alias, NoSsr) here

[kevinmarrec]

@pimlie I don't think so, it's just an alias there won't be any depreciation
@clarkdo Nice one, we should do same for NuxtChild then :)

[pimlie]

I believe this is a solution to a problem that doesnt exists and therefore adds too much (useless) configuration. Although there might be reasons for changing this I am unaware of?

@manniL posted a nice link what mentions this yesterday on discord

[kevinmarrec]

@pimlie I'd say the reason is just about DX.
It makes me think about something : Even if not used, aliases (which still remain new registered global Vue components) make JS bundle higher right ?

[pi0]

Configurable alias makes integration harder and fragments users. Like a module that adds components that rely on no-ssr and we change the alias to something else in the project. I think we can rename no-ssr to client-only and deprecate no-ssr (for b-w compatibility) if it is better DX by using new name.

[clarkdo]

If replacing NoSsr with ClientOnly is the choice, I don't think it's a good idea to change it since NoSsr has been there for a long time and well documented. I think it's a understandable name as well, another reason is for keeping consistency with https://github.com/egoist/vue-no-ssr.

[bluelovers]

i think should keep no-ssr, just add a alias name

i didn't use Vue.component(NoSsr.alias, NoSsr), is because follow exists code style

why use ClientOnly for alias name, because we can keep some exists vue code to nuxt form vuepress

[manniL]

This could already be done in userland. If we adopt a new name, we should enforce it as well and deprecate no-ssr IMO, so we keep consistency.

[galvez]

+1 on introducing alias-only.

[Atinux]

Indeed VuePress has a <client-only> component that does the same as <no-ssr> (except they don't handle placeholder): https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions

Actually, for DX, client-only is better since there is no negation in the name.

I would suggest to rename to and set up an alias for <no-ssr>.

• deprecate in favour of <client-only> (Nuxt 3)?

[Atinux]

To make this PR valid, I recommend to:

• Add https://github.com/egoist/vue-client-only as dependency
• Add a created hook in the <no-ssr> component (https://github.com/nuxt/nuxt.js/blob/f2b014ec1386ccf42af12330d8edc62eb675cf9c/packages/vue-app/template/components/no-ssr.js) to show a deprecation warning in favour of using <client-only>
• Add a PR for the docs

[bluelovers]

where is doc?

[Atinux]

I did the changes required + added a PR on the docs.

[clarkdo]

Please open a pr for doc in https://github.com/nuxt/docs/blob/master/en/api/components-no-ssr.md

I'll do it.

[Atinux]

@clarkdo already did: nuxt/docs#1472

[clarkdo]

@Atinux PR for Chinese nuxt/docs#1473