vue3-container-directive

vue3-container-directive

This directive is only adds styles to parent element.

  container-name: "some-name"; /* if passed by directive argument */
  container-type: inline-size;

then you can use @container queries as @media

  @container (max-width: 400px) {
    .card-child {
        /* some adaptive styling */
    }
}

More about @container queries

• Container queries land in stable browsers
• Styling components using CSS container queries

Install

npm

npm install vue3-container-directive

<template>
  <div id="app">
    <!-- directives for named container -->
    <div v-container:card>
      <div class="card-child"></div>
    </div>
    
    <!-- directives -->
    <div v-container>
      <div class="card-child"></div>
    </div>
    
  </div>
</template>

<style >
  .card-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  @container card (max-width: 400px) {
    /* rules for named container */
    .card-child {
      grid-template-columns: 1fr;
    }
  }

  @container (max-width: 400px) {
    .card-child {
      grid-template-columns: 1fr;
    }
  }
</style>