Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
vue-no-ssr
Advanced tools
The vue-no-ssr package is a Vue.js component that allows you to conditionally render parts of your application only on the client-side, effectively preventing server-side rendering (SSR) for those parts. This is particularly useful for components that rely on browser-specific APIs or need to access the window or document objects.
Client-Side Only Rendering
This feature allows you to wrap any content inside the <no-ssr> component to ensure it is only rendered on the client-side. This is useful for components that depend on browser-specific features.
<template>
<div>
<no-ssr>
<p>This content will only be rendered on the client-side.</p>
</no-ssr>
</div>
</template>
<script>
import NoSSR from 'vue-no-ssr';
export default {
components: {
NoSSR
}
};
</script>
Fallback Content
You can provide fallback content that will be displayed while the client-side content is being loaded. This is useful for improving the user experience by showing a loading indicator or placeholder.
<template>
<div>
<no-ssr placeholder="<p>Loading...</p>">
<p>This content will only be rendered on the client-side.</p>
</no-ssr>
</div>
</template>
<script>
import NoSSR from 'vue-no-ssr';
export default {
components: {
NoSSR
}
};
</script>
The vue-client-only package provides similar functionality to vue-no-ssr by allowing you to conditionally render components only on the client-side. It is a lightweight alternative and is often recommended for Vue 3 projects. Unlike vue-no-ssr, vue-client-only is specifically designed for Vue 3 and offers a more modern API.
The react-no-ssr package offers similar functionality for React applications. It allows you to conditionally render components only on the client-side, preventing them from being rendered during server-side rendering. This package is useful for React developers who need to handle client-specific rendering logic.
yarn add vue-no-ssr
<template>
<div id="app">
<h1>My Website</h1>
<no-ssr>
<!-- this component will only be rendered on client-side -->
<comments />
</no-ssr>
</div>
</template>
<script>
import NoSSR from 'vue-no-ssr'
export default {
components: {
'no-ssr': NoSSR
}
}
</script>
Use a slot or text as placeholder until <no-ssr />
is mounted on client-side.
eg, show a loading indicator.
<template>
<div id="app">
<h1>My Website</h1>
<!-- use slot -->
<no-ssr>
<comments />
<comments-placeholder slot="placeholder" />
</no-ssr>
<!-- or use text -->
<no-ssr placeholder="Loading...">
<comments />
</no-ssr>
</div>
</template>
<script>
import NoSSR from 'vue-no-ssr'
export default {
components: {
'no-ssr': NoSSR
}
}
</script>
By default the placeholder will be wrapped in a div
tag, however you can use placeholderTag
prop to customize it:
<no-ssr placeholder="loading" placeholader-tag="span">
<comments />
</no-ssr>
And you get:
<span class="no-ssr-placeholder">
loading
</span>
yarn install
# Run example
yarn example
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
vue-no-ssr © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoist.moe · GitHub @egoist · Twitter @_egoistlily
FAQs
Vue component to wrap non SSR friendly components
The npm package vue-no-ssr receives a total of 184,930 weekly downloads. As such, vue-no-ssr popularity was classified as popular.
We found that vue-no-ssr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.