Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow <noscript> in Vue templates for SSR usage

See original GitHub issue

Version

2.5.17

Reproduction link

https://codepen.io/brophdawg11/pen/OBdZyX

Steps to reproduce

I’m opening this issue as a follow up to https://github.com/vuejs/vue/issues/8247, as I don’t think the solution provided there is suitable for all use-cases. In a fairly simple UI, where everything is relatively positioned and flows downward, it would likely be fine to include <noscript> outside the context of the Vue application, and it would render correctly above the entire app.

However, there are plenty of other UI’s that it may not be desirable or feasible to include <noscript> outside of the Vue application context and display it properly. The linked codepen shows a simple fixed-header layout, where including the <noscript> tag outside the Vue application context results in the <noscript> tag being hidden behind the fixed header, where in reality it is intended to be rendered inside the main body content, and thus below the fixed header.

The <noscript> outside the Vue context also has the unintended effect of pushing down the main content, which has a proper margin-top to account for the static-height fixed header.

Per MDN, <noscript> is Flow Content (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content), it is perfectly viable to exist outside the <head> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript), and is perfectly valid to nest inside the DOM in a <div>, as div’s allow Flow Content as their children (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div).

Please reconsider the decision to not permit noscript tags in Vue templates.

What is expected?

<noscript> elements should render properly in Vue templates

What is actually happening?

<noscript> elements do not render properly in Vue templates and cause hydration issues when in SSR

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:31
  • Comments:30

github_iconTop GitHub Comments

44reactions
lanaambrecommented, Mar 13, 2019

@alexbruno It makes sense to have noscript in component in some case : like SEO (one of the main purpose of SSR provided by Vue).

If you lazy-loading image you can have a component like that :

<div class="lazy-image-component">
  <img :src="inView && src"  />

  <noscript inline-template>
    <img :src="src" />
  </noscript>
</div>

In this case it’s important for the img tag contain in noscript to be at this place for better UI integration.

15reactions
alexbrunocommented, May 26, 2020

In fact, noscript is like an HTML native hack in modern web! For today web apps, disabled JS is very uncommon.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Solved]-Vue & <noscript> issue-Vue.js - appsloveworld.com
The "noscript" tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser...
Read more >
Vue & <noscript> issue - javascript - Stack Overflow
The "noscript" tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser...
Read more >
Vue 3 Server Side Rendering (SSR)
A guide to building and running a server-side rendered Vue 3 application in a Node environment with routing, state, and meta.
Read more >
Vue.js SSR meta tags for .NET Core and JavascriptServices
We'll be using the vue-meta package. This package gives you the possibility to add a property in the vue component to define the...
Read more >
Template Syntax | Vue.js
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

SSR error during $style injection on cached components

Next page

'inject' Properties are not added to the CombinedVueInstance type definition