Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how the best packages for adding grid layout, watching intersections, adding styled-components, and adding tags.
vue-grid-layout
vue-grid-layout lets us add grid to our app with cells that are resizable.
To use it, first we install it by running:
npm i vue-grid-layout
Then we write:
<template>
<div>
<grid-layout
:layout.sync="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item
v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
>{{item.i}}</grid-item>
</grid-layout>
</div>
</template>
<script>
import VueGridLayout from "vue-grid-layout";
const layout = [
{ x: 0, y: 0, w: 2, h: 2, i: "0" },
{ x: 2, y: 0, w: 2, h: 4, i: "1" },
{ x: 4, y: 0, w: 2, h: 5, i: "2" }
];
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
data() {
return {
layout
};
}
};
</script>
to add the grid.
grid-layout has the grid.
grid-item has the grid items.
We set the is-draggable prop to make the items draggable.
is-resizable prop makes the items resizable.
is-mirrored set to false indicates that we don’t want to reverse the order of the items.
row-height has the row height.
use-css-transforms set to true means we use CSS to transform items.
col-num has the number of columns on the grid.
layout has the layout array.
We set the x and y coordinates with the properties of the same name in the entry.
Width and height are set by w and h .
i has the content.
Vue Intersect
Vue Intersect adds the intersection observer API to our Vue app.
To use it, we install it by running:
npm i vue-intersect
Then we can use it by writing:
<template>
<intersect @enter="msg = 'Intersected'" @leave="msg = 'Not intersected'">
<div>{{ msg }}</div>
</intersect>
</template>
<script>
import Intersect from "vue-intersect";
export default {
components: { Intersect },
data() {
return {
msg: ""
};
}
};
</script>
We imported the component and then we’ll see if the element intersecting the viewport as indicated by the messages that are set by the enter and leave events.
vue-styled-components
vue-styled-components lets us create styled-components with a few lines of code./
To install it, we run:
npm i vue-styled-components
Then we can use it by writing:
<template>
<div>
<styled-title>hello</styled-title>
</div>
</template>
<script>
import styled from "vue-styled-components";
const StyledTitle = styled.h1`
font-size: 1.5em;
text-align: center;
color: green;
`;
export default {
components: {
"styled-title": StyledTitle
}
};
</script>
We created the StyledTitle component by passing in a string with the styles to the styled.h1 template tag.
Styled components can accept props to change their styling:
<template>
<div>
<styled-title primary>hello</styled-title>
</div>
</template>
<script>
import styled from "vue-styled-components";
const h1Props = { primary: Boolean };
const StyledTitle = styled("h1", h1Props)`
font-size: 1em;
margin: 1em;
background: ${props => (props.primary ? "blue" : "white")};
color: ${props => (props.primary ? "white" : "blue")};
`;
export default {
components: {
"styled-title": StyledTitle
}
};
</script>
We made the StyledTitle component take the primary prop.
vue-tags-input
vue-tags-input lets us input tags. To install it, we run:
npm i @johmun/vue-tags-input
Then we can use it by registering the component and putting the vue-tags-input into our template:
<template>
<div>
<vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags"/>
<p>{{tag}}</p>
<p>{{tags}}</p>
</div>
</template>
<script>
import VueTagsInput from "@johmun/vue-tags-input";
export default {
components: {
VueTagsInput
},
data() {
return {
tag: "",
tags: []
};
}
};
</script>
It emits the tags-changed event that has all the tags, and we set that as the tags.
The tag state has the tag that’s currently being entered.
Conclusion
vue-grid-layout lets us add a draggable and resizable grid layout easily.
Vue Intersect brings the intersection observer API to our Vue app.
vue-styled-components lets us add styled-components easily.
vue-tags-input is an easy to use tag input.
