%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}



%Kopfzeile
\ihead{Vue.js}
\chead{}
\ohead{http://kohnlehome.de/html/vue-pinia.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
Vue State Management: Pinia
\end{center}




\section*{Installation}
\begin{verbatim}
npm install pinia
\end{verbatim} 


\section*{main.js}
\begin{verbatim}
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');
\end{verbatim} 


\section*{stores/counter.js}
\begin{verbatim}
import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);

    function increment() {
        count.value++;      
    }
  
    return { count, increment };
  });
\end{verbatim} 


\section*{components/Component.js}
\begin{verbatim}
<script setup>
  import { useCounterStore } from './stores/counter.js';
  const counter = useCounterStore();
</script>

<template>
  <button @click="counter.increment">{{ counter.count }}</button>  
</template>
\end{verbatim} 





\end{document}