webnoob's Projects
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.
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.
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.
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.
Animated navigation menu built with Vue JS
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.
Vue.js Filters and how to create and use them. Vue allows us to define filters that we can use with interpolations and bindings. And the important thing is that filters don't transform the original data. They only change the output. So filters can be useful in a lot of different situations.
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.
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.
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.
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.
A reusable Pie chart component, where you can dynamically provide data. And, of course, with a nice animation, if the pie chart is rendered.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent