npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-flex

v2.1.2

Published

A reusable flexbox component using functional css.

Downloads

513

Readme

vue-flex

npm version npm downloads GitHub issues GitHub stars GitHub forks Twitter

A Vue.js functional component to wrap anything in flexbox. (1.8kb gzipped js+css, or 1.2k js & .6k css)

Getting Started

import Vue from "vue";
// imports the ESM module by default
import VueFlex from "vue-flex";
// Already autoprefixed for vendor prefixes.
// Also namespaced to avoid collisions.
import "vue-flex/dist/vue-flex.css";

Vue.use(VueFlex);

Dist Varieties

The main export is an es2015 module, but commonjs and umd modules are also available:

  • Commonjs: "vue-flex/dist/vue-flex.common.js"
  • UMD: "vue-flex/dist/vue-flex.js"
<main>
    <my-navbar></my-navbar>
    <flex-row tag="section">
        <my-sidebar></my-sidebar>
        <flex-col
              tag="main"
              align-v="center"
              align-h="center"
              grow
              wrap
              @click="handleClick"
        >
            <my-content></my-content>
            <my-content></my-content>
            <my-content></my-content>
        </flex-col>
    </flex-row>
</main>

Component Props

| Prop | Type | Default | Description | | :-----: | :-----: | :-----: | ------------------------------------------------------------------------- | | tag | String | "div" | Element tagName (any valid HTML tag name) | | inline | Boolean | false | display: inline-flex | | column | Boolean | false | flex-direction: column (row is default) | | reverse | Boolean | false | flex-direction: row-reverse|column-reverse | | wrap | Boolean | false | flex-wrap: wrap | | noWrap | Boolean | false | flex-wrap: nowrap | | grow | Boolean | false | Applies to all child nodes: {flex-grow:1;flex-shrink:1;flex-basis:0;} | | justify | String | null | One of [ "start", "end", "center", "between", "around" ] | | align | String | null | One of [ "start", "end", "center", "baseline", "stretch" ] | | alignV | String | null | One of [ "start", "end", "center", ["between", "baseline",] "stretch" ] | | alignH | String | null | One of [ "start", "end", "center", ["between", "baseline",] "stretch" ] |

* alignV and alignH just use align & justify under the hood, but when using the directional flex components, they handle the confusion of which axis is vertical/horizontal.

v2

Version 2 brings two new components <flex-row> & <flex-col>. In general, these just wrap the column property and make your markup more declarative. I've also added alignV & alignH props to all the components. These will use align-items & justify-content to determine the correct axis to apply your settings. Remembering which axis is vertical when in column direction is a classic confusion for me, so this abstracts that into a much more declarative api.

Flexbox all the things!

While building a large Vue.js application, I found myself constantly repeating the usage of various CSS flexbox utility classes, so I wrapped all the classes in a simple Vue component. This worked beautifully! But for two problems:

  • How do I listen for native events on the <flex> component? Do I really have to re-emit all the native events to enable v-on:event?
  • How am I supposed to find anything in the Vue devtools component tree if so many of my components are wrapped in these <flex> tags?
    • If you have a <ul> with a bunch of <flex> wrapped <li>'s, it's annoying. If you use flexbox heavily, it legitimately wastes time performing a vnode scavenger hunt whenever you need to debug a particular item.

Functional Vue Components

Functional Vue components are a real game changer here. Not only does the modifier-less v-on:event syntax work again to bind to native events (when the root element of the component is an HTML Element), but functional components do not appear in Vue devtools. Beyond the debugging experience, there is a performance boost to be had as well. Functional components are stateless (no data) and instanceless (no this context). This removes the initial overhead of observation and is very beneficial when a component is likely to be rendered many times in your app (think list items in a large list).