vue-remove-scope-directive

Vue directive that stops data-v-XXXXXX propagation in components with scoped styles. The primary use is to prevent leaking styles into slots.

Install

yarn add vue-remove-scope-directive

Use

Import in your entrypoint, such as main.ts:

import Vue from "vue"
import VueRemoveScopeDirective from "vue-remove-scope-directive"
 
Vue.directive("remove-scope", VueRemoveScopeDirective)

then use in Vue templates:

<!-- Layout.vue -->
<template>
    <div>
        <!-- This h1 is styled -->
        <h1>Welcome</h1>
        <main v-remove-scope>
            <!-- This h1 is not styled -->
            <h1>Willkommen!</h1>
            <!-- Neither are slot contents -->
            <slot />
        </main>
    </div>
</template>
 
<style scoped>
    h1 { color: red }
</style>

and child templates:

<!-- page.vue -->
<template>
    <Layout>
        <!-- Styles will not leak here -->
        <h1>Page</h1>
    </Layout>
</template>
 
<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
 
import Layout from "@/Layout.vue"
 
@Component({
    components: { Layout },
})
export default class Page extends Vue {}
</script>

Modifiers

v-remove-scope.inner modifier keeps data-v-XXXXXX attribute on the actual node where the directive is applied (but removes from all inner nodes).

Consider the following example:

<template>
    <div class="page">
        <main v-remove-scope>
            <p>This will be unstyled.</p>
        </main>
        <footer v-remove-scope.inner>
            <p>
                This will be green: footer keeps scope attribute,
                but the paragraph is cleared.
            </p>
        </main>
    </div>
</template>
 
<style scoped>
    main { color: red }
    footer { color: green }
    p { color: blue }
</style>