This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
```javascript | |
// src/composables/useCounter.js | |
import { ref } from 'vue'; | |
export default function useCounter() { | |
const count = ref(0); | |
function increment() { | |
count.value++; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body | |
{ | |
margin: 0px | |
} | |
#horizon | |
{ | |
color: white; | |
background-color: #0ff; | |
text-align: center; |