Curated TypeScript Vue.js
Scott C. Krause | Saturday, Jul 24, 2021
Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
Vue and TypeScript Expertise
Since 2014, I've implemented the best coding practices that reduce complexity and take advantage of the flexibility of the Vue.js ecosystem.
Utilizing the observable power of Vue.js and the fluid Vuetify Material Design system, I am adept at using a wide range of modern Vue tools to build mission-critical applications. This includes understanding how to properly use the Composition API, TypeScript, Vue CLI, Vue Router, Vuex, Vuetify, Quasar, Progressive Web Apps, and Vue DevTools to maximize code reusability, easily expand application functionality, and standardize UI style across the organization.
If you have an existing Vue 2 project or library that you intend to upgrade to Vue 3 please contact me.
Frequently Asked Interview Questions
How do you implement two-way binding in Vue?
You can achieve two-way binding by specifying the v-model property on the input element. This will make sure that as the element value changes, so will the Vue data property. If the data property changes, so will the value in the input field.
What are the supported modifiers on a Vue model?
Lazy, number, and trim.
What is the One-Way Data Flow in Vue.js?
Props work in one direction, which means data flows from parent to child. When a modification is made to a parent property, the child property is automatically updated, but not the other way around. It prohibits a child from changing the state of the parent property, which can make your application's data flow more difficult to manage.
What is the Vue.js component Prop?
Data is passed from the parent component to the child component using Component Prop. A component can have as many props as it wants. The prop is a custom attribute that becomes a property on the component instance when a value is supplied to it.
From parent to child component, a component Prop forms a one-way down binding. When the parent property changes, it affects the child, but not the other way around. As a result, when the Parent component is modified, all child components are updated as well. As a result, you won't have to worry about mutating the prop in the child component.
What are the differences between v-if and v-show?
V-if will not render the element if the expression is false. V-show, it will render the element in the DOM no matter what, but will be hidden if false. v-if supports both v-else and v-else-if and may be used inside the template element, v-show does not.
What are Vue components?
Vue components are reusable Vue instances that have a name. They support the same properties as the root Vue instance such as data, methods, computed, watch, mixins, as well as the lifecycle methods.
What is the difference between registering a component locally and globally?
Registering a component globally allows it to be reused throughout the application, even within other components. Local components can only be used in the component that it was registered in.
You can register a component globally using Vue.component(name, componentData) and register a component locally by adding the it to the components property of the component you want to add it to.
What are mixins?
Mixins are a flexible way to enable function distribution among components. A mixin can contain any option found in a component. When a component references one or more mixins, the options of the mixin will be 'mixed' into the component.
In the case of data conflicts, the components data property will take precedence. The same goes for methods, components, directives. As for lifecycle hooks of the same name, both will be merged into an array in which the mixin hook will be called before the component hook.
Note: Scoped slots provide the same functionality as mixins and are, most of the time, the better choice.
The Hybrid Graph Vue/Vuetify Component
Neodigm 55 Low Code UX micro-library
Popups, Toast, Parallax, and SFX
UX Usability Heuristic Evaluation
HE Heuristic Evaluation
New Macbook Setup for Developers
New Macbook Config for Devs 2023
Indispensable Curated WebAssembly Links
Curated PWA Links
Indispensable Curated PWA Links
Curated GA4 Links
Indispensable Curated Google Analytics 4 Links
Curated SFDC Qlik Tableau Links
Curated Salesforce Qlik Tableau Links
Curated LWC Links
Indispensable Curated LWC Links
Curated TypeScript Vue.js
Indispensable Curated Vue TypeScript
Creative 3D animation resources
Indispensable Curated Creative Links
Transition to TypeScript
Indispensable Curated TypeScript Links
The Clandestine Dead Drop
The Ironclad Clandestine Dead Drop
Indispensable Curated Svelte Links
Curated Blogfolios Links
Curated Emerging Tech Links
Indispensable Curated Tech Links
Cytoscape Skills Data Visualization
Persuasive Infographics & Data Visualizations
eCommerce Accessibility A11y
Accessibility Challenges Unique to eCommerce
Roll Dice in High-Fidelity 3D
Create 3D Dice with Strong Random Entropy
Replace text with a super small character set.
Heatmap: Track content visibility time in Google Analytics or Adobe Analytics
Get all products from Any Shopify Site
Fetch all Products and Images from any Shopify site.
JS Airport Geo-Proximity Radius
Airport geo-proximity logic that answers questions, like What are the three closest airports to me right now?
Calculate Aspect Ratio of Viewport
Calculate Aspect Ratio of Viewport
Produce CSV with client-side JS. Construct Blog and Download as CSV file.
PWA Add to Home Screen
Progressive Web App ⚡ Advanced Cache && Notification Patterns
Convert an HTML formatted data attrib name to a JS formatted name.
Oracle PL/SQL Stored Procedure
Vintage Stored Procedure to denormalize department codes
Dark Mode and Reduced Motion
Making Dark Mode work with both a UI switch && the OS preference.
Vanilla JS Popover Microinteraction
A popover is a transient view that shows on a content screen when a user clicks on a control button or within a defined area.
Vue.js double tap Microinteraction
Firing both a tap and a double-tap on the same element
CSS Advanced Accessibility
Motion, theme, and skip A11Y CSS solutions
Cypress E2E Quality Assurance
End to End testing 🚀 Headless browser automation
Asynchronous eCom Nav Category Count
Asynchronous recursive crawl reports the total number of products by category.
Color of the Year CSS Styles
Color of the Year 2000 thru 2021 CSS Utility classes
Solve Anagram Puzzle
Do two strings contain the exact amount of letters to form two words?
Virtual Keyboard Extention Configuration
TS Virtual Keyboard Chrome Extention
Web Music Ad Blocker Snippet
Automatically mute the Music player when Ads are playing and unmute when they are done (in Chrome).
Capture Entire DOM State into Inline CSS Snapshot
Save As HTML a snapshot capture of entire DOM State with inline CSS