Skip to content

Instantly share code, notes, and snippets.

View supermensa's full-sized avatar

Supermensa supermensa

View GitHub Profile
Renderless components
https://vuejs.org/guide/components/slots.html#renderless-components
The recommendation is to use composables when reusing pure logic, and use components when reusing both logic and visual layout.
In Vue 3, a renderless component is a reusable and flexible component that focuses on providing functionality without prescribing how the final UI should look. The term "renderless" comes from the fact that these components don't render any markup or styles themselves. Instead, they expose their functionality through scoped slots, which allows the parent component to dictate how the UI should be rendered.
The primary motivation behind renderless components is to promote reusability and separation of concerns. By decoupling the logic and presentation, these components can be easily shared across projects or within a team without being restricted to specific styles or design systems.
To create a renderless component in Vue 3, you'll typically use the following concepts:
@supermensa
supermensa / gist:782514759d4179dc7acc2cf3c5929be0
Last active April 21, 2023 17:21
Vue 3 Composition API destructuring
```javascript
// src/composables/useCounter.js
import { ref } from 'vue';
export default function useCounter() {
const count = ref(0);
function increment() {
count.value++;
}
Below are the most used MySQL commands:
For creating a table:
CREATE TABLE example (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER);
To grab everything from the table
SELECT * FROM example;
To get the number of rows from the table
SELECT COUNT(1) FROM example;
To insert a row into the table
INSERT INTO example (name, age) VALUES (‘veer’, 27);
To delete the row from the table
@supermensa
supermensa / centerdiv.css
Created April 19, 2014 12:02
Dead centre a div
body
{
margin: 0px
}
#horizon
{
color: white;
background-color: #0ff;
text-align: center;