v-container

This plugin for VUE makes it easy to set up block geometry.

Contents

• Quick start
• Directives
• Grid guide
• Dinamic layout guide

Quick start

Installation

npm install @chepuhasasha/v-container

Include plugin in main.ts/js

import { createApp } from "vue";
import App from "./App.vue";
import VContainer from "@chepuhasasha/v-container";

createApp(App).use(VContainer).mount("#app");

Use in template

The plugin provides quick access to the properties of geometric characteristics. More about directives in the section Directives

<template>
  <div v-flex v-col v-gap="20" v-padding='"20px"' v-x-align="'center'">
    <h1>My component</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</template>

Result in browser

<div
  style="display: flex; flex-direction: column; gap: 20px; padding: 20px; align-items: center;"
>
  <h1>My component</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
</div>

Directives

Directives allow you to quickly access styles.

| directive | type | css equivalent | | :----------------------- | ------- | :---------------------------------------------------------------- | | v-width='"100px"' | string | width: 100px; | | v-min-width='"100px"' | string | min-width: 100px; | | v-max-width='"100px"' | string | max-width: 100px; | | v-height='"100px"' | string | height: 100px; | | v-min-height='"100px"' | string | min-height: 100px; | | v-max-height='"100px"' | string | max-height: 100px; | | v-gap='10' | number | gap: 10px; | | v-padding='"10px 5px"' | string | padding: 10px 5px; | | v-x-overflow='"auto"' | string | ovwrflow-x: auto; | | v-y-overflow='"auto"' | string | ovwrflow-y: auto; | | v-flex | boolean | display: flex; | | v-col | boolean | flex-direction: column; | | v-x-align='"center"' | string | if v-col align-items: center; else justify-content: center; | | v-y-align='"center"' | string | if v-col justify-content: center; else align-items: center; | | v-grid | boolean | display: grid; | | v-grid-cols-template | string | display: grid; | | v-grid-rows-template | string | display: grid; | | v-area='"1/1/2/2"' | string | grid-area: 1/1/2/2; |

Grid guide

Page template

<template>
  <div
    v-grid
    v-grid-cols-template='"repeat(3, 1fr)"'
    v-grid-rows-template='"repeat(3, 1fr)"'
  ></div>
</template>

Add component

<template>
  <div
    v-grid
    v-grid-cols-template='"repeat(3, 1fr)"'
    v-grid-rows-template='"repeat(3, 1fr)"'
  >
    <my-component
      v-area='"2/2/3/3"'
      v-width='"100%"'
      v-height='"100%"'
    >
  </div>
</template>

Dinamic layout guide

<template>
  <div
    v-grid
    v-grid-cols-template='grid[mode].cols'
    v-grid-rows-template='grid[mode].rows'
  >
    <my-component
      v-area='blocks.myComponent[mode]'
      v-width='"100%"'
      v-height='"100%"'
    >
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive } from "vue";

  const layout = reactive({
    mode: "decktop",
    grid: {
      decktop: { cols: "repeat(3, 1fr)", rows: "repeat(3, 1fr)"},
      mobile: { cols: "repeat(3, 1fr)", rows: "repeat(1, 1fr)"},
    },
    blocks: {
      myComponent: {
        decktop: "2/2/3/3",
        mobile: "2/1/3/2",
      },
    }
  });

  const changeMode = () => {
    layout.mode = layout.mode === "mobile" ? "decktop" : "mobile";
  };
</script>

mobile mode