Rodney Vg

Rodney Vg

1596252840

Vue UI components with configurable classes ready for TailwindCSS

Vue-Tailwind

For more info check the official site: https://vue-tailwind.com/

VueTailwind is a set of Vue components created to be customized to adapt to the unique design of your application.

Built to be customized

When you work on a real-world application, you usually need different variants for every component your app uses; you may need (besides of default style of your text input) a specific style for a search input inside a navbar and another one for the contact form, and we are not talking yet about the different states that your input could have.

All VueTailwind components were designed to be customized with custom CSS classes and unlimited variants defined when you import the library or when you use the component.

This means that when you use this library, you are not attached to any style defined by us like it happens when you use a typical library of components like Bootstrap. Instead, you can determine your theme based on your application’s needs.

This library makes special sense when you work with utility-first frameworks like TailwindCss, which is the default framework used in this library.

Installation

1. Install the dependencies

npm install vue-tailwind --save

Or:

yarn add vue-tailwind

2. Configure your project to use vue-tailwind

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const theme = {
  //...
}

Vue.use(VueTailwind, theme)
Apply your own theme:

Let’s say, for example, that for the specific needs of your project the text inputs should have a blue two width border, the buttons should have rounded borders and you need a secondary button that should be purple.

Considering those needs define objects with the desired classes for every component, a good approach is to create a file where you define the template:

const TInput = {
  classes: 'border-2 block w-full rounded text-gray-800',
  // Optional variants
  variants: {
    // ...
  },
  // Optional fixedClasses
  // fixedClasses: '',
}

const TButton = {
  classes: 'rounded-lg border block inline-flex items-center justify-center',
  variants: {
    secondary: 'rounded-lg border block inline-flex items-center justify-center bg-purple-500 border-purple-500 hover:bg-purple-600 hover:border-purple-600',
  },
  // Optional fixedClasses
  // fixedClasses: 'transform ease-in-out duration-100',
}

const MyOwnTheme = {
  TInput,
  TButton,
}

export default MyOwnTheme

Then you can import your theme and add it as a parameter when you install VueTailwind:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import MyOwnTheme from './myOwnTheme.js'

Vue.use(VueTailwind, MyOwnTheme)

Or just define the settings directly:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const TInput = {
  classes: 'border-2 border-blue-500 block w-full rounded',
}
// Or create a separate file like `src/themes/default/TInput.js` and import it
// import TInput from './myOwnTInput'
Vue.use(VueTailwind, {
  TInput
})

// Or why not? define the settings inline:
Vue.use(VueTailwind, {
  TInput: {
    classes: 'border-2 border-blue-500 block w-full rounded',
  }
})

Quick start

Here is a small example of how the classes and variants are defined when you import this library:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const theme = {
  TInput: {
    classes: 'form-input border-2 text-gray-700',
    variants: {
      error: 'form-input border-2 border-red-300 bg-red-100',
      // ... Infinite variants
    }
  },
  TAlert: {
    classes: {
      wrapper: 'rounded bg-blue-100 p-4 flex text-sm border-l-4 border-blue-500',
      body: 'flex-grow text-blue-700',
      close: 'text-blue-700 hover:text-blue-500 hover:bg-blue-200 ml-4 rounded',
      closeIcon: 'h-5 w-5 fill-current'
    },
    variants: {
      danger: {
        wrapper: 'rounded bg-red-100 p-4 flex text-sm border-l-4 border-red-500',
        body: 'flex-grow text-red-700',
        close: 'text-red-700 hover:text-red-500 hover:bg-red-200 ml-4 rounded'
      },
      // ... Infinite variants
    }
  },
  // ... The rest of the components
}

Vue.use(VueTailwind, theme)

The default classes and variants can also be defined in the component props:

<t-input
  :classes="form-input border-2 text-gray-700"
  :variants="{
    error: 'form-input border-2 border-red-300 bg-red-100',
    success: 'form-input border-2 border-green-300 bg-green-100'
  }"
/>

To apply an specific variant you just need to use the variant prop:

<t-input variant="error" />

The variant prop also accepts an object that takes the first attribute with a truthy value

<t-input
  :variant="{
    error: inputIsNotValid,
    success: inputIsValid,
  }"
/>

Whats new in version 1.x

  • Rebuilt from scratch in Typescript
  • Small bundle size and less dependencies
  • A better way to import only selected components
  • Unlimited variants and a easy way to configure them

Whats next?

  • Im working in a datepicker that is the most requested component, after that im planning to create a swal like dialog component.
  • Already started to work in a react version of this package called react-tailwind.
  • Im making some final changes to the Community themes features that should be released soon.

Contribute

Is this project helpful for you? Consider sponsoring me https://github.com/sponsors/alfonsobries.

Of course, any other kind help is welcome, even if you notice some grammar mistakes (English is not my primary language) see contribute page for details.

Changelog

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please email alfonso@vexilo.com instead of using the issue tracker.

Credits

Download Details:

Author: alfonsobries

Live Demo: https://www.vue-tailwind.com/

GitHub: https://github.com/alfonsobries/vue-tailwind

#vuejs #vue #javascript #vue-js

What is GEEK

Buddha Community

Vue UI components with configurable classes ready for TailwindCSS
Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Rodney Vg

Rodney Vg

1596252840

Vue UI components with configurable classes ready for TailwindCSS

Vue-Tailwind

For more info check the official site: https://vue-tailwind.com/

VueTailwind is a set of Vue components created to be customized to adapt to the unique design of your application.

Built to be customized

When you work on a real-world application, you usually need different variants for every component your app uses; you may need (besides of default style of your text input) a specific style for a search input inside a navbar and another one for the contact form, and we are not talking yet about the different states that your input could have.

All VueTailwind components were designed to be customized with custom CSS classes and unlimited variants defined when you import the library or when you use the component.

This means that when you use this library, you are not attached to any style defined by us like it happens when you use a typical library of components like Bootstrap. Instead, you can determine your theme based on your application’s needs.

This library makes special sense when you work with utility-first frameworks like TailwindCss, which is the default framework used in this library.

Installation

1. Install the dependencies

npm install vue-tailwind --save

Or:

yarn add vue-tailwind

2. Configure your project to use vue-tailwind

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const theme = {
  //...
}

Vue.use(VueTailwind, theme)
Apply your own theme:

Let’s say, for example, that for the specific needs of your project the text inputs should have a blue two width border, the buttons should have rounded borders and you need a secondary button that should be purple.

Considering those needs define objects with the desired classes for every component, a good approach is to create a file where you define the template:

const TInput = {
  classes: 'border-2 block w-full rounded text-gray-800',
  // Optional variants
  variants: {
    // ...
  },
  // Optional fixedClasses
  // fixedClasses: '',
}

const TButton = {
  classes: 'rounded-lg border block inline-flex items-center justify-center',
  variants: {
    secondary: 'rounded-lg border block inline-flex items-center justify-center bg-purple-500 border-purple-500 hover:bg-purple-600 hover:border-purple-600',
  },
  // Optional fixedClasses
  // fixedClasses: 'transform ease-in-out duration-100',
}

const MyOwnTheme = {
  TInput,
  TButton,
}

export default MyOwnTheme

Then you can import your theme and add it as a parameter when you install VueTailwind:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
import MyOwnTheme from './myOwnTheme.js'

Vue.use(VueTailwind, MyOwnTheme)

Or just define the settings directly:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const TInput = {
  classes: 'border-2 border-blue-500 block w-full rounded',
}
// Or create a separate file like `src/themes/default/TInput.js` and import it
// import TInput from './myOwnTInput'
Vue.use(VueTailwind, {
  TInput
})

// Or why not? define the settings inline:
Vue.use(VueTailwind, {
  TInput: {
    classes: 'border-2 border-blue-500 block w-full rounded',
  }
})

Quick start

Here is a small example of how the classes and variants are defined when you import this library:

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const theme = {
  TInput: {
    classes: 'form-input border-2 text-gray-700',
    variants: {
      error: 'form-input border-2 border-red-300 bg-red-100',
      // ... Infinite variants
    }
  },
  TAlert: {
    classes: {
      wrapper: 'rounded bg-blue-100 p-4 flex text-sm border-l-4 border-blue-500',
      body: 'flex-grow text-blue-700',
      close: 'text-blue-700 hover:text-blue-500 hover:bg-blue-200 ml-4 rounded',
      closeIcon: 'h-5 w-5 fill-current'
    },
    variants: {
      danger: {
        wrapper: 'rounded bg-red-100 p-4 flex text-sm border-l-4 border-red-500',
        body: 'flex-grow text-red-700',
        close: 'text-red-700 hover:text-red-500 hover:bg-red-200 ml-4 rounded'
      },
      // ... Infinite variants
    }
  },
  // ... The rest of the components
}

Vue.use(VueTailwind, theme)

The default classes and variants can also be defined in the component props:

<t-input
  :classes="form-input border-2 text-gray-700"
  :variants="{
    error: 'form-input border-2 border-red-300 bg-red-100',
    success: 'form-input border-2 border-green-300 bg-green-100'
  }"
/>

To apply an specific variant you just need to use the variant prop:

<t-input variant="error" />

The variant prop also accepts an object that takes the first attribute with a truthy value

<t-input
  :variant="{
    error: inputIsNotValid,
    success: inputIsValid,
  }"
/>

Whats new in version 1.x

  • Rebuilt from scratch in Typescript
  • Small bundle size and less dependencies
  • A better way to import only selected components
  • Unlimited variants and a easy way to configure them

Whats next?

  • Im working in a datepicker that is the most requested component, after that im planning to create a swal like dialog component.
  • Already started to work in a react version of this package called react-tailwind.
  • Im making some final changes to the Community themes features that should be released soon.

Contribute

Is this project helpful for you? Consider sponsoring me https://github.com/sponsors/alfonsobries.

Of course, any other kind help is welcome, even if you notice some grammar mistakes (English is not my primary language) see contribute page for details.

Changelog

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please email alfonso@vexilo.com instead of using the issue tracker.

Credits

Download Details:

Author: alfonsobries

Live Demo: https://www.vue-tailwind.com/

GitHub: https://github.com/alfonsobries/vue-tailwind

#vuejs #vue #javascript #vue-js

UX designer ? UI designer ? UI Developer ?

The UX designer is someone who thinks about what should the user flow be like, which page should lead to which page, when should a confirm popup appear or not appear, should there be a listing page before or after a create-new page, should there be an address field in the page or geolocation is enough to serve the purpose? After brainstorming through each of these and several other questions, the UX designer comes up with something known as wireframes, which in simple terms is just a blueprint of the website/app.
This is image title

To get in-Depth knowledge on UI Design you can enroll for a live demo on UI online training

The UI designer then takes the wireframes and makes them beautiful, also ensuring that the workflow of the product is communicated well to the user. He will add the pixel level details to the wireframes. What should be the font used, what should be the background image, do we need a background image, what should be the foreground color, how big should be the submit button, does it make more sense to have the menu at the bottom of the screen, what should the logo look like? The job of a UI designer is answering all these and thereafter delivering static mockups, using may be Photoshop, Invision and many other design tools.

The UI developer is the one who puts these static mockups in “real code”. They might need skills like HTML CSS , precompilers(like sass or less) , UI frameworks (like bootstrap or foundation), or xml layouts( in case of android UI) or a combined knowledge of all of them with Javascript (in case of react, react native). The result is a beautiful set of screens/pages which can be actually rendered in a browser or a mobile device.Learn more from ui design course

#ui online course #ui design course #ui training #online ui training #ui courses online #ui design classes online

Sofia Kelly

Sofia Kelly

1578061020

10 Best Vue Icon Component For Your Vue.js App

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert’s fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Animated SweetAlert Icons for Vue

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

vue-svg-transition

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Vue-Awesome

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

vue-transitioning-result-icon

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

vue-zondicons

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

vicon

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

vue-svgicon

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

vue-material-design-icons

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

vue-ionicons

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package’s aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

vue-ico

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

#vue #vue-icon #icon-component #vue-js #vue-app

Henry Short

Henry Short

1578472348

7 Best Vue Highlight Component for Your Vue App

Vue highlight is often used to highlight text and syntax. Here are the 7 Vue highlight components I’ve collected.

1. vue-snippets

Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code.

vue-snippets

Download


2. vim-vue-plugin

Vim syntax and indent plugin for vue files

vim-vue-plugin

Download


3. vue-highlighter

Vue directive for highlight multiple istances of a word.

vue-highlighter

Download


4. vue-code-highlight

Beautiful code syntax highlighting as Vue.js component.

vue-code-highlight

Download


5. Vue Prism Editor

A dead simple code editor with syntax highlighting and line numbers. 7kb/gz

Features

  • Code Editing ^^
  • Syntax highlighting
  • Undo / Redo
  • Copy / Paste
  • The spaces/tabs of the previous line is preserved when a new line is added
  • Works on mobile (thanks to contenteditable)
  • Resize to parent width and height
  • Support for line numbers
  • Support for autosizing the editor
  • Autostyling the linenumbers(optional)

Vue Prism Editor

Demo

Download


6. vue-highlight-words

A simple port from react-highlight-words

Vue component to highlight words within a larger body of text.

vue-highlight-words

Demo

Download


7. vue-highlight-text

Vue component for highlight multiple istances of a word.

vue-highlight-text

Demo

Download


Thank for read!

#vue-highlight #vue #vue-highlight-component #highlight-vue