Implement Vuesax New Framework for Vuejs
Tags: vue, vuesax, javascript, webpack
Published: 2018-09-10 09:21:42

---
title: Implement Vuesax New Framework for Vuejs
published: true
description: How to implement Vuesax in a project with webpack and Vue CLI 3
tags: vuejs, vuesax, vue, javascript, webpack
---

![Vuesax logo](https://thepracticaldev.s3.amazonaws.com/i/22gpstrydiklaeksom7u.png)

[Vuesax](https://lusaxweb.github.io/vuesax/) is a framework of components based on vuejs, it is a framework that is designed from scratch to be incrementally adoptable.

The framework is focused on facilitating the development of applications, improving the design of the same without removing the necessary functionality. we want all the components to be independent in colors, shapes and design for a freedom that we like all front-end but without losing the speed of creation and production.

##Install

This installation tutorial is for the use of vuesax with:

- webpack
- Vue CLI 3
- NPM
- Node.js

If you are going to implement vuesax in a project by the CDN there is not much to explain just putting the import of the script after the vuejs

## Create the project

First of all we need a folder where our great project is going to be hosted but since we are going to use Vue CLI we do not need to create it, we create it automatically when creating a project
So, we are going to start a project with Vue CLI 3, of course, if we have it installed globally on our computer, if not, execute this script

```bash
npm install -g @vue/cli
```

Already installed globally we stand in the folder where all our projects are (We do not create the project folder Vue CLI does it for us)

We execute the script to start a Vue CLI project

```bash
vue create my-project
```

Ready we have the folder with all our necessary files for a project with vuejs
Then we enter the folder that in this case is called my oriject (after `vue create` is the name of the project)

Within the project to start our test server and see that everything goes well we execute

```bash
npm run serve
```

After a while our Vue CLI will raise our server, almost always the server path is `localhost:8080`

![Vuesax-init-vue](https://thepracticaldev.s3.amazonaws.com/i/7j1c06n1o2y1ho2vsekv.png)

Ready we have our active server with vuejs and everything necessary for a project with vuesax

## Install Vuesax

Now that we have the project ready with everything necessary (Vue CLI) does everything for us, we will add Vuesax with the command

```bash
npm install vuesax
```

We must wait for the dependency to be installed in our project

When finished installing now, only the implementation will be lacking for use anywhere in the application

We open our main file which in this case is

- my-project/src/main.js

```js
import Vue from 'vue'
import Vuesax from 'vuesax' //import dependency
import 'vuesax/dist/vuesax.css' // import css style

Vue.use(Vuesax) // implement Vuesax throughout the application
```

The file should be like this

```js
import Vue from 'vue'
import App from './App.vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.use(Vuesax)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')
```

We already have vuesax in our application with all the components and functions

## Add a component

We already have vuesax in the whole application but now as we add a component to our template.

we are going to add a button and replace the links in the file `my-project/src/components/HelloWorld.vue`

The file should be so clear only the part of the template

```html
<template>
  <div class="hello">
   <vs-button vs-type="filled">Primary</vs-button>
  </div>
</template>
```

After implementing, let's review how our `vs-button` component looks

![Vuesax-implement-vue-gif](https://thepracticaldev.s3.amazonaws.com/i/qlyek9jdujlubcd5zqzv.gif)

Ready our application with Vuesax is working now implemented

Thank you very much for taking the time to read about Vuesax

## Links

- [Vuesax](https://lusaxweb.github.io/vuesax/)
- [Github Vueasx](https://github.com/lusaxweb/vuesax)
- [Vue CLI](https://cli.vuejs.org/)
- [webpack](https://webpack.js.org/)
- [NPM vuesax](https://www.npmjs.com/package/vuesax)