net

Vue.js and Webpack

Webpack

In case you don’t know what Webpack is and what it’s all about,

it can simply be described as a static module bundler for modern

JavaScript applications. It helps to bundle all of the different

modules and then it packages them into one bundle or more. At

the time of writing, Webpack 4 has been released, which offers

better features and improvements that will definitely make your

development flow a lot easier.

Vuex

Like every other component-based framework, it can become

difficult to keep track of state when your application begins

to grow – when there is a lot of data moving around from one

component to another, we need some sort of state management

solution. That’s where Vuex comes into play. State basically means

the current working status of an app. It is determined by what data

exists and where such data can exist at a given time.

Vue-router

If you’re developing an SPA with Vue and your app consists of

multiple views, then you’ll need a way to navigate through your

app and routing becomes a core part of your project. When adding

vue-router to the mix, all we need to do is map our components to

the routes and let vue-router know where to render them.

VUE.JS ECOSYSTEM

ADDITIONAL COMPONENTS

height: 100vh;
background: linear-gradient(to right, $lightGreen,
$blueGradient),
url(“../assets/imgs/header-bg-02.jpeg”) center no-
repeat;
background-size: cover;
.headerlogo-box {
position: absolute;
top: 4rem;
left: 4rem;
.headerlogo {
height: 4rem;
animation: animateDown 1s ease-in-out;
transition: all 0.2s ease-out;
&:hover {
transform: rotate(-5deg);
}
}
}

PAGE HEADING AND SUBHEADING
The page heading and the subheading can be styled
next. The idea here is to animate these as the page
loads. The animation property and value has already
been added but of course we still need to link these
up to keyframes later. There is one thing we want
to point out. Often when you animate text, you get
a very subtle shake or flicker. Using the backface-
visibility property and setting its value to hidden should
prevent that from happening.

.heading-primary--main {
color: $white;
text-transform: uppercase;
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1rem;
animation: animateLeft 1.2s ease-out;
text-align: center;
backface-visibility: hidden; / Prevent animation shake /
font-family: $font;
}
.heading-primary--sub {
display: block;
letter-spacing: .9rem;

“We can make sure our

FVV#lv#vshflĽf#wr#wkdw

frpsrqhqw#e|#dgglqj#lq

wkh#nh|zrug#ĠvfrshgġĤ