webnoob's repositories
webnoob.dev
My personal blog created with Nuxt.js and Markdown
vuejs-page-preloader
How to create a loading animation for website using Vue.js. Create your own page pre-loader. If we build a single page application, the app can get pretty big over time. Respectively the bundle size from the application is the main reason why the initial load time is very long in such a case. Then I recommend showing the user that the app is still loading, with this beautiful animation, for example.
vuejs-animated-navigation
Animated navigation menu built with Vue JS
vuejs-accordion
This nice animated accordion here has a smooth opening and closing transition. On top, you have an arrow for each element, which rotates if you click an item in the list.
vuejs-animated-product-page
Animate several parts from your website or a product page. You can set for each element a delay so that it looks like it is being built up step by step.
vuejs-infinitescroll
Infinite Scrolling with Vue JS in a single vue js component. As a trigger, I used a javascript Intersection Observer for the lazy load. For this example, I show Infinite Scrolling using CSS Cards.
vuejs-nightmode
A Dark Layout Mode implemented with Vue JS. The state is persisted in local storage from the browser. I use font awesome icons for the dark mode toggle.
vuejs-animated-grid
Grid animation in Vue JS with Transitions on-page load. This is a staggering animation and I make this with images. But you can make this with any other elements, like a teaser or even complete website parts. There are no limits.
vuejs-multilevel-dropdown
How to create a dropdown menu in Vue JS for an admin dashboard, for example. This is basically dynamic in the structure where you can easily add, change, or delete the elements if you use a CMS or something similar in your backend.
vuejs-piechart
A reusable Pie chart component, where you can dynamically provide data. And, of course, with a nice animation, if the pie chart is rendered.
vuejs-tags-input
Tags input field created with Vue.js. You have here nearly all the necessary features on board. You can add tags via an input field, remove them via an icon, or change it via live edit, where we switch the text element to an input element.
vue3-composition-api
First look at the Composition API in Vue.js 3. It's one of the most significant new features in Vue.js 3 and I want to talk about why you can use and how you can use this API.
vue3-portals
How to use portals in Vue 3. It's one of the fantastic new features we are getting with the latest major release. With portals in Vue 3, we can transfer rendered template code outside of the Vue app. For example, right before the closing body tag.
vuejs-sidebar-transition-effect
How to create a animated sidebar menu using Vue.js Transitions and SCSS. All the icons appear step by step. I give you a detailed explanation of how it works and why it works with some SCSS tricks.