Product Sorter Vue 3

This is the repo for the tutorial on Building A Product List Page With Vue 3 And Vite. .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download Features Vue 3 Vite Script Setup Composition API Simple Animation Installation Clone to local npx degit heksagonnet/product-sorter-vue3 my-product-sorter-vue3 cd my-product-sorter-vue3 pnpm i ## If you don't have pnpm installed, run: npm install -g pnpm Download and use Download and run pnpm i inside the downloaded folder. .btn-dark { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #212529; border-color: #212529; } .btn-dark:hover { color: #fff !important; background-color: #383838 !important; border-color: #1a1e21; } .btn-check:focus + .btn-dark, .btn-dark:focus { color: #fff; background-color: #1c1f23 !important; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-check:active + .btn-dark, .btn-check:checked + .btn-dark, .btn-dark.active, .btn-dark:active, .show .btn-dark.dropdown-toggle { color: #fff; background-color: #1a1e21 !important; border-color: #191c1f; } .btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #212529; border-color: #212529; } Code .btn-white { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #212832 !important; background-color: #f6f9ff !important; border-color: #fff; } .btn-white.focus, .btn-white:focus, .btn-white:hover { color: #212832; background-color: #ceefff7a !important; border-color: #ceefff; } .btn-white.focus, .btn-white:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-white.disabled, .btn-white:disabled { color: #212832; background-color: #fff; border-color: #fff; } .btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show .btn-white.dropdown-toggle { color: #212832; background-color: #e6e6e6; border-color: #dfdfdf; } .btn-white:not(:disabled):not(.disabled).active:focus, .btn-white:not(:disabled):not(.disabled):active:focus, .show .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 223, 224, 0.5); } .btn-green { color: #fff; background-color: #00ac69; border-color: #00ac69; } .btn-green.focus, .btn-green:focus, .btn-green:hover { color: #fff; background-color: #008652; border-color: #00794a; } Preview .btn-danger { width: fit-content; display: flex; padding: 5px 20px; justify-content: center; align-items: center; color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-check:focus + .btn-danger, .btn-danger:focus { color: #fff; background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-check:active + .btn-danger, .btn-check:checked + .btn-danger, .btn-danger.active, .btn-danger:active, .show .btn-danger.dropdown-toggle { color: #fff; background-color: #b02a37; border-color: #a52834; } .btn-check:active + .btn-danger:focus, .btn-check:checked + .btn-danger:focus, .btn-danger.active:focus, .btn-danger:active:focus, .show .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #dc3545; border-color: #dc3545; } Download If you encounter any issues or have any questions with the template, please contact us directly and let us know about it.

Product Sorter Vue 3

Features#

Installation#

Clone to local#

Download and use#

Features

Installation

Clone to local

Download and use