Vuejs Components

Vuejs Components

1628927401

A Flippable Card Carousel Build With Vue and Tailwind CSS

Vue Flippable Card Carousel

View Demo

carousel-introduction

WebMobile
carousel-webcarousel-mobile

About The Project

There are App and child component FlippableCard

You can control the Flippable Card Carousel in various way

Rotate the card:

  • Click or Tap(Mobile) the arrow icons
  • Click or Tap(Mobile) the next or previous card face
  • Use key ArrowRgiht and ArrowLeft
  • Slide left or right on the carousel area (Mobile)

Flip the card:

  • Mouse over the center card
  • Use key ArrowUp and ArrowDown
  • Tap the center card & tap outside the center card (Mobile)

Built With

Vue

TypeScript

Tailwind CSS

SCSS

Getting Started

Prerequisites

Before you start, install Yarn package to global.

npm install --global yarn

Installation

Clone the repo

git clone https://github.com/VannsKang/Vue-Flippable-Card-Carousel.git

Install NPM packages

yarn install

Run the project

yarn serve

Build the package

yarn build

Project Tree

.
├── public
├── src/
│   ├── assets
│   ├── components/
│   │   ├── index.ts
│   │   └── FlippableCard.vue
│   ├── styles/
│   │   └── index.css
│   ├── typings/
│   │   └── index.ts
│   ├── App.vue
│   ├── custom.d.ts
│   ├── main.ts
│   └── ...
├── tailwind.config.js
├── tsconfig.json
├── package.json
├── vue.config.js
└── ...

NPM Packages

package.json

"dependencies": {
  "core-js": "^3.6.5",
  "vue": "^2.6.11"
},
"devDependencies": {
  "@tailwindcss/postcss7-compat": "^2.2.4",
  "@typescript-eslint/eslint-plugin": "^4.18.0",
  "@typescript-eslint/parser": "^4.18.0",
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-eslint": "~4.5.0",
  "@vue/cli-plugin-typescript": "~4.5.0",
  "@vue/cli-service": "~4.5.0",
  "@vue/eslint-config-typescript": "^7.0.0",
  "autoprefixer": "^9",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "node-sass": "^6.0.1",
  "sass": "~1.32.0",
  "sass-loader": "^10",
  "postcss": "^7",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat",
  "typescript": "~4.1.5",
  "vue-svg-loader": "^0.16.0",
  "vue-template-compiler": "^2.6.14"
}

#vue #tailwindcss #webdev 

What is GEEK

Buddha Community

A Flippable Card Carousel Build With Vue and Tailwind CSS
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

Elvis Miranda

Elvis Miranda

1578029098

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Tailwindcss-Vue

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

zeit-ui/vue

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

CSSeffectsSnippets

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Vue Cirrus

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Vue CSS Modules

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

BG MixMaster 90

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

CSSOBJ

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

#css #vue-css #css-component #vue-css-component #vue-js

Opal Gulgowski

Opal Gulgowski

1627357620

How to Build A IP Tracking App with Vue 3, Tailwind CSS & Leaflet.js

in this video we build an ip tracking app using vue 3 & the composition api, tailwind css & leaflet.js. We cover all the basics of setting up an application using the Vue 3 Composition API such as: setting up the “setup option”, creating data values & functions, making data reactive & lifecycle hooks.

We don’t cover everything, but we touch upon enough to create a simple starting app. This video should give you the knowledge & confidence to start build apps using Vue 3 & the Composition API.

Starting Repo: https://github.com/johnkomarnicki/vue-tailwinds-ip-tracker/tree/starting-files
Completed Repo: https://github.com/johnkomarnicki/vue-tailwinds-ip-tracker/tree/completed-app

Timestamps:
0:00 Introduction
3:42 Project Setup
9:55 Update Page/Document Title
12:07 Search Input
23:04 IP Address Info Component
30:12 Leaflet Map Implementation
36:45 Get Geolocation Function

#vue #vue3 #leaflet #vue3compositionapi
Current Subscribers: 1,789

#tailwind css #vue #leaflet #leaflet.js #css

Dallas Veum

Dallas Veum

1623300018

Build a Pinterest Clone using Vue.js and Tailwind CSS

Learn how to use Tailwind CSS and Vue.js to build a Pinterest clone!

Github Repo: https://github.com/StephDietz/Pinterest-Clone
Material icons: https://fonts.google.com/icons
Pictures: https://unsplash.com/

#tailwind #vue #tailwindcss #css #web-development

Dallas Veum

Dallas Veum

1622346660

Build a Twitter Clone using Vue.js and Tailwind CSS

In this video I recreate the twitter home page using Vue.js and Tailwind CSS!

Link to GitHub repo https://github.com/StephDietz/twitter-clone

#tailwind #vue #tailwindcss #css