webnoobcodes

vuejs-animateonscroll

vuejs-appstorecards

vuejs-mobile-navigation

vuejs-multistepform

vuejs-sidebar

vuejs-sliding-form

vuejs-tabs-components

vuejs-todoapp

vuejs-typeeffect

webnoob.dev

My personal blog created with Nuxt.js and Markdown

webnoobcodes/webnoob.dev

My personal blog created with Nuxt.js and Markdown

webnoobcodes/vuejs-appstorecards

webnoobcodes/vuejs-animateonscroll

webnoobcodes/vuejs-tabs-components

webnoobcodes/vuejs-sidebar

webnoobcodes/vuejs-mobile-navigation

webnoobcodes/vuejs-multistepform

webnoobcodes/vuejs-newsapireader

webnoobcodes/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.

webnoobcodes/vuejs-animated-navigation

Animated navigation menu built with Vue JS

webnoobcodes/vuejs-mobileslider

webnoobcodes/vuejs-pokemons

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/webnoobcodes

webnoobcodes/vue3-upgrade

webnoobcodes/vuejs-appmenubar

webnoobcodes/vuejs-mealconfigurator

webnoobcodes/vuejs-passwordfield

webnoobcodes/vuejs-signupform

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/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.

webnoobcodes/vuejs-router-basics

webnoobcodes/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.