@chepuhasasha/v-container NPM

v-container

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

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>

page template 3x3

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>

page template comp

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

page template comp mobile