To use optional chaining & nullish coalescing in #vue files today:
- Run
- Set
Useful for many DOM operations. For example,
https://github.com/vuejs/vetur
- Run
yarn add typescript@beta- Set
"vetur.useWorkspaceDependencies": trueUseful for many DOM operations. For example,
querySelector => Element | nulltextContent => string | null | undefinedhttps://github.com/vuejs/vetur
Vue.js stands out from other frameworks for its intuitive reactivity. #vue 3 composition api is going to removing some limitations in Vue 2 and provide a more explicit api.
Vue 3 introduces:
Vue 3 introduces:
reactive(), ref(), and computed(). Author explains why reactive() is bad and other two are good.A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with #vue and also fully responsive.
https://github.com/muhammederdem/vue-interactive-paycard
https://github.com/muhammederdem/vue-interactive-paycard
Using TailwindCSS with Vue functional components.
In this article, we identify potential pitfalls when using utility-first #css frameworks and how to avoid them. Most importantly, we find out how to use #vue functional components to create abstractions for repeating patterns like cards and headlines, for example.
https://markus.oberlehner.net/blog/reusable-functional-vue-components-with-tailwind-css/
In this article, we identify potential pitfalls when using utility-first #css frameworks and how to avoid them. Most importantly, we find out how to use #vue functional components to create abstractions for repeating patterns like cards and headlines, for example.
https://markus.oberlehner.net/blog/reusable-functional-vue-components-with-tailwind-css/
markus.oberlehner.net
Reusable Functional Vue.js Components with Tailwind CSS
Learn how to work with utility-first CSS frameworks like Tailwind in Vue.js and how to avoid potential pitfalls.
Fast, native and thread-safe HTML/CSS/Python GUI framework.
You can literally write #vue code in #python. Sounds exiting?..
https://www.plynth.net/
You can literally write #vue code in #python. Sounds exiting?..
https://www.plynth.net/
API request builder - A free, fast, and beautiful alternative to Postman.
Helps you create your requests faster, saving you precious time on your development.
https://github.com/liyasthomas/postwoman
#vue #js
Helps you create your requests faster, saving you precious time on your development.
https://github.com/liyasthomas/postwoman
#vue #js
GitHub
GitHub - hoppscotch/hoppscotch: Open source API development ecosystem - https://hoppscotch.io (open-source alternative to Postman…
Open source API development ecosystem - https://hoppscotch.io (open-source alternative to Postman, Insomnia) - hoppscotch/hoppscotch
A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance.
With built-in integrations for #vue, #react, #angular, and #svelte
https://github.com/naver/egjs-infinitegrid
With built-in integrations for #vue, #react, #angular, and #svelte
https://github.com/naver/egjs-infinitegrid
massCode is a free and open source code snippets manager for developers. Inspired by applications like SnippetsLab and Quiver.
https://github.com/antonreshetov/massCode
#vue #js
https://github.com/antonreshetov/massCode
#vue #js
Type Router: a flexible, type safe routing library.
First and foremost Type Route strives for excellent TypeScript support. An API designed for static analysis not only means the compiler has your back but also enables your editor to provide intelligent hints and warnings as you code.
https://www.type-route.org/
I had a blog post last year about problems in typing Vue and it includes router as one of the weakest points: https://sobolevn.me/2019/06/really-typing-vue
I am glad that people are working on it!
#vue #react #ts
First and foremost Type Route strives for excellent TypeScript support. An API designed for static analysis not only means the compiler has your back but also enables your editor to provide intelligent hints and warnings as you code.
https://www.type-route.org/
I had a blog post last year about problems in typing Vue and it includes router as one of the weakest points: https://sobolevn.me/2019/06/really-typing-vue
I am glad that people are working on it!
#vue #react #ts
Simple and complete #js testing utilities that encourage good testing practices.
Suitable for #vue, #react, and almost any other library.
https://testing-library.com/
Suitable for #vue, #react, and almost any other library.
https://testing-library.com/
Experimental no-bundle dev server for #vue SFCs.
The primary difference is that for vite there is no bundling during development. The ES Import syntax in your source code is served directly to the browser, and the browser parses them via native <script module> support, making HTTP requests for each import. The dev server intercepts the requests and performs code transforms if necessary. For example, an import to a vue file is compiled on the fly right before it's sent back to the browser.
There are a few advantages of this approach:
- Since there is no bundling work to be done, the server cold start is extremely fast.
- Code is compiled on demand, so only code actually imported on the current screen is compiled. You don't have to wait until your entire app to be bundled to start developing. This can be a huge difference in apps with dozens of screens.
- Hot module replacement (HMR) performance is decoupled from the total number of modules. This makes HMR consistently fast no matter how big your app is.
vite is highly experimental at this stage and is not suitable for production use, but we hope to one day make it so.
https://github.com/vuejs/vite
The primary difference is that for vite there is no bundling during development. The ES Import syntax in your source code is served directly to the browser, and the browser parses them via native <script module> support, making HTTP requests for each import. The dev server intercepts the requests and performs code transforms if necessary. For example, an import to a vue file is compiled on the fly right before it's sent back to the browser.
There are a few advantages of this approach:
- Since there is no bundling work to be done, the server cold start is extremely fast.
- Code is compiled on demand, so only code actually imported on the current screen is compiled. You don't have to wait until your entire app to be bundled to start developing. This can be a huge difference in apps with dozens of screens.
- Hot module replacement (HMR) performance is decoupled from the total number of modules. This makes HMR consistently fast no matter how big your app is.
vite is highly experimental at this stage and is not suitable for production use, but we hope to one day make it so.
https://github.com/vuejs/vite
Introducing @nuxt/components: module to scan and auto import components for Nuxt.js 2.10+
No need to import your components anymore.
- Scan and auto import components
- Multiple paths with customisable prefixes and patterns
- Lazy loading support
- Hot replacement
- Support for library authors
https://github.com/nuxt/components
#nuxt #vue #ts
No need to import your components anymore.
- Scan and auto import components
- Multiple paths with customisable prefixes and patterns
- Lazy loading support
- Hot replacement
- Support for library authors
https://github.com/nuxt/components
#nuxt #vue #ts
Effector: The state manager.
Effector is an effective multi-store state manager for #js apps (#react/React Native/#vue/Node.js), that allows you to manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good type support and high capacity API. Effector supports both #ts and Flow type annotations out of the box.
Effector follows five basic principles:
- Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
- Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
- Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and plain js objects
- Predictability and clarity of API - a small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
- The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.
https://github.com/zerobias/effector
Effector is an effective multi-store state manager for #js apps (#react/React Native/#vue/Node.js), that allows you to manage data in complex applications without the risk of inflating the monolithic central store, with clear control flow, good type support and high capacity API. Effector supports both #ts and Flow type annotations out of the box.
Effector follows five basic principles:
- Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
- Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
- Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and plain js objects
- Predictability and clarity of API - a small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
- The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.
https://github.com/zerobias/effector
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Supports both #vue and #react. Svelte support will be added soon.
It will be a really interesting project!
https://headlessui.dev/
Supports both #vue and #react. Svelte support will be added soon.
It will be a really interesting project!
https://headlessui.dev/
Inertia.js: the modern monolith. Build single-page apps, without building an API.
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.
Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.
Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done!
Inertia isn't a framework, nor is it a replacement to your existing server-side or client-side frameworks. Rather, it's designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. We currently have three official client-side adapters (#react, #vue, and #svelte) and two server-side adapters (Laravel and Rails).
https://inertiajs.com/
#js
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.
Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.
Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done!
Inertia isn't a framework, nor is it a replacement to your existing server-side or client-side frameworks. Rather, it's designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. We currently have three official client-side adapters (#react, #vue, and #svelte) and two server-side adapters (Laravel and Rails).
https://inertiajs.com/
#js
Keel is a tool for automating Kubernetes deployment updates.
kubectl is the new SSH. If you are using it to update production workloads, you are doing it wrong. See examples on how to automate application updates.
Keel runs as a single container, scanning Kubernetes and Helm releases for outdated images. Policies and trigger types are specified in your application deployment files or Helm charts. Single command, no dependencies. No lock-in, no custom configuration files.
Comes with a web interface.
https://github.com/keel-hq/keel
#go #vue #devops #k8s
kubectl is the new SSH. If you are using it to update production workloads, you are doing it wrong. See examples on how to automate application updates.
Keel runs as a single container, scanning Kubernetes and Helm releases for outdated images. Policies and trigger types are specified in your application deployment files or Helm charts. Single command, no dependencies. No lock-in, no custom configuration files.
Comes with a web interface.
https://github.com/keel-hq/keel
#go #vue #devops #k8s
The Open Source Airtable alternative.
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.
Features:
- Search, sort, filter, hide columns with uber ease
- Create Views: Grid, Gallery, Kanban, Gantt, Form
- Share Views: public & password protected
- Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
- Roles: Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles
- Access Control: Fine-grained access control even at database, table & column level
- Programmatic APIs via REST and GraphQL
Personal opinion: I love #nocode instruments like this. I had very pleasant experience with Airtable for several quite different tasks. This is something you really need to consider before writing your own automatizations.
https://github.com/nocodb/nocodb
#js #vue
Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet.
Features:
- Search, sort, filter, hide columns with uber ease
- Create Views: Grid, Gallery, Kanban, Gantt, Form
- Share Views: public & password protected
- Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
- Roles: Owner, Creator, Editor, Commenter, Viewer, Commenter, Custom Roles
- Access Control: Fine-grained access control even at database, table & column level
- Programmatic APIs via REST and GraphQL
Personal opinion: I love #nocode instruments like this. I had very pleasant experience with Airtable for several quite different tasks. This is something you really need to consider before writing your own automatizations.
https://github.com/nocodb/nocodb
#js #vue