DEV Community: luisdanielroviracontreras

How to create 6 hover effects to buttons

luisdanielroviracontreras — Sun, 20 Sep 2020 09:43:51 +0000

Post > https://www.instagram.com/p/CFVJcvtCDiu/
Codepen: https://codepen.io/luisdanielroviracontreras/pen/NWNOOwz

More Post > https://www.instagram.com/luisdanielroviracontreras/

Implement Vuesax New Framework for Vuejs

luisdanielroviracontreras — Mon, 10 Sep 2018 09:21:42 +0000

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

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

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

npm run serve

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

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

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

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

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

<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

Ready our application with Vuesax is working now implemented

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

How to implement Vuenut in a project vue CLI with webpack

luisdanielroviracontreras — Thu, 19 Apr 2018 22:46:27 +0000

First of all, what is vuenut?

This library is created to manipulate and visualize the pattern of state management in the case of vuejs (Vuex). The main idea is to facilitate the development and maintenance of data in an application.

Start a project with the new cli 3 de vuejs

As any developer we love the latest, so we are going to implement vuenut in the latest version of the clue of vuejs.

First, if you have no idea what the cli de vue is, check the Documentacion Oficial

Vue CLI

is a full system for rapid Vue.js development, providing:

Interactive project scaffolding via @vue/cli.
Zero config rapid prototyping via @vue/cli + @vue/cli-service-global.
A runtime dependency (@vue/cli-service) that is:
Upgradeable;
Built on top of webpack, with sensible defaults;
Configurable via in-project config file;
Extensible via plugins
A rich collection of official plugins integrating the best tools in the frontend ecosystem.

Iniciar proyecto con vue CLI

Before initial a project with vue CLI we have to install it globally in our machine so that after it can do its magic, for this we execute this command (It does not matter where it is executed because it is installed globally)

 npm install -g @vue/cli

The -g command indicates that you must install globally

Already with Vue CLI installed

Stop in the folder where you want to add the project (Not the project folder but a before vue CLI creates the folder when starting).

 vue create my-project-vuenut

After executing this command, CLI asks us some questions.

Please pick a preset: (Use arrow keys)
Please pick a preset: default (babel, eslint)

you have to wait a while for the installed plugins and dependencies.

At the end of the installation we see a new folder with our project name that in this case is (my-project-vuenut) now if we enter the project that more or less has this structure.

 my-project-vuenut
 - node_modules
 - public
  favicon.ico
  index.html
 - src
 -- assets
 -- components
 App.vue
 main.js
 .gitignore
 package.json
 package-lock

We will execute the command to initial the local server

npm run serve

Install and implement Vuenut to the project

Now we have everything ready to implement Vuenut then get to work.

npm install vuenut

When finished installing vuenut in our project we opened our main file that is (main.js) so that I use the library.

Add vuenut

To add vuenut we import the already installed dependency and the css styles you need to look great.

import Vuenut from 'vuenut'
import 'vuenut/dist/vuenut.css'

And we have Vue use it to add the global level functionality to Vue

Vue.use(vuenut)

Ready we have vuenut implemented, we just need to add the component within our App.vue file.

Add the component

To implement vuenut we open the App.vue archovo and within our component.

<vuenut/>

The App.vue file would remain that way.

<template>
<div id="app">
 <vuenut/> <!-- Vuenut component -->
 <img src="./assets/logo.png">
 <HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
 import HelloWorld from './components/HelloWorld.vue'
 export default {
  name: 'app',
  components: {
   HelloWorld
  }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Ready and we just have to check our local server and see how vuenut is working in so few steps.

Vuenut is a library that needs Vuex to work so we can implement vuex in our project and see all the advantages vuenut offers us.

Install and deploy Vuex

we install the dependence on our project.

npm install vuex

After finishing the installation, we import and implement.

import Vuex from 'vuex'
Vue.use(Vuex)

we already have vuex in the project just missing add it to the vue to have our full store.

const store = new Vuex.Store({
 state: {
  myName: 'Vuenut'
 },
})

And we add it to our instance of

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

The App.vue file would be left this way

import Vue from 'vue'
import App from './App.vue'
import Vuenut from 'vuenut'
import 'vuenut/dist/vuenut.css'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.use(Vuenut)
const store = new Vuex.Store({
 state: {
   myName: 'Vuenut'
 },
})
Vue.config.productionTip = false
new Vue({
 store,
render: h => h(App)
}).$mount('#app')

Ready we have our store implemented now we are going to add the vuenut.

<vuenut :store="$store.state"/>

It is important that when adding the store to vuenut let’s put the reference to the state so that everything works perfectly

Ready we have our component with added vuex and it should look like this

Excellent we already have vuenut implemented and ready to be used in the project, some things you can do with vuenut.

Change store data at run time.
Save the store to use it later and replicate problems or bugs.
export store in .json to import it later or share it with a project partner.
Edit the entire store and change the structure of the data at run time.
Create functions to execute when starting the application or key combination. All the data of the library is stored in the storage so as not to have to repeat any configuration.
And many more features.

Vuenut is an open source library, we love to create and keep growing the community.