vue3-container-directive

This directive is only adds styles to parent element.

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

then you can use @container queries as @media

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

More about @container queries

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

Install

npm

npm install vue3-container-directive

1<template>
2  <div id="app">
3    <!-- directives for named container -->
4    <div v-container:card>
5      <div class="card-child"></div>
6    </div>
7    
8    <!-- directives -->
9    <div v-container>
10      <div class="card-child"></div>
11    </div>
12    
13  </div>
14</template>
15
16<style >
17  .card-child {
18    display: grid;
19    grid-template-columns: 1fr 1fr;
20  }
21
22  @container card (max-width: 400px) {
23    /* rules for named container */
24    .card-child {
25      grid-template-columns: 1fr;
26    }
27  }
28
29  @container (max-width: 400px) {
30    .card-child {
31      grid-template-columns: 1fr;
32    }
33  }
34</style>