webnoobcodes
Creating tutorials, courses, and articles about Vue.js and other related stuff. And some plain good old advice.
webnoob
Pinned Repositories
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's Repositories
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.