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

Vue 3 Card Swiper Proof of Concept with Tailwind CSS

Vue 3 Card Swiper

This is a proof of concept for a card swiper for Vue 3, styled with Tailwind CSS.

ORIGINAL VITE README BELOW

Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don’t really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can use the following:

If Using Volar

Run Volar: Switch TS Plugin on/off from VSCode command palette.

If Using Vetur

  1. Install and add @vuedx/typescript-plugin-vue to the plugins section in tsconfig.json
  2. Delete src/shims-vue.d.ts as it is no longer needed to provide module info to Typescript
  3. Open src/main.ts in VSCode
  4. Open the VSCode command palette
  5. Search and run “Select TypeScript version” -> “Use workspace version”

Download Details:

Author: scriptcoded
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/scriptcoded/vue-3-card-swiper

#vue #tailwindcss #css #tailwind #typescript

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