darkylmnx

import { ref } from 'vue';

const useCounterUp = (initialVaue = 0) => {
  const counter = ref(initialVaue);
  const increment = () => counter.value += 1;
  return { counter, increment };
};

const useCounterDown = (initialVaue = 0) => {
  const counter = ref(initialVaue);

darkylmnx

// definition
function $(s) { return new lib(s); }

function lib(s) { this.$els = document.querySelectorAll(s); }

lib.prototype.css = function(prop, val) {
    this.$els.forEach($el => ($el.style[prop] = val));
    // this is what makes it chainable
	return this;
};

darkylmnx

// In the vue.config.file
// I load globally in all my components 2 files
// that DO NOT contain CSS but just variables and functions
// If you add CSS in those files they would be duplicated in each component
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/scss/variables.scss";

darkylmnx

<?php require 'header.php' ?>

<?php if (isLogged()) : ?>
<script>
  // this is one way, the global var way
  // the function getAuthUser() returns an Object of the user
  // oui json encode it which will give something like : { name: "", ... }
  // and this when rendered here is a string, but in a browser it's a js object so no need for quotes or it will be a string in JS too
  window.user = <?= json_encode(getAuthUser()) ?>;
</script>

darkylmnx

<template>
  <!-- this layout will not have any header or general things to all layouts -->
  <div>
    <h2> i'm a sub layout </h2>
    <slot />
  </div>
</template>

darkylmnx

// this is app.js, your entry point in your HTML

import { data } from './data.js'
// we use brackets because we only want to export the "data" key exported
// though it will only contain "data" here, everything will be evaluated and executed in data.js

import './scripts'
// here, everything in scripts.js will be evaluated and executed BUT,
// no variables, constants or functions from scripts.js are accessible from here
// "sum" is not accessible, because "sum" was not exported from scripts.js