\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Peanuts-83}
\pdfinfo{
  /Title (vue-js.pdf)
  /Creator (Cheatography)
  /Author (Peanuts-83)
  /Subject (Vue.js Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{25784F}
\definecolor{LightBackground}{HTML}{F1F6F4}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Vue.js Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Peanuts-83} via \textcolor{DarkBackground}{\uline{cheatography.com/140542/cs/29858/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Peanuts-83 \\
  \uline{cheatography.com/peanuts-83} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 19th November, 2021.\\
   Updated 20th November, 2021.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.


\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{How to read these codes snippets}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Vue components contain in the same place `\textless{}script\textgreater{}, \textless{}template\textgreater{}` and ` \textless{}style\textgreater{}` data contents. In order to distinguish them: \newline % Row Count 3 (+ 3)
{\emph{Italic code is for script}}.  Regular code is for template.% Row Count 5 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{5.061 cm} x{4.8923 cm} x{6.9167 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{17.67cm}}{\bf\textcolor{white}{Directives}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{v-if / v-else-if / v-else}} & Condition & \textless{}section v-show='var == true'\textgreater{}show me\textless{}/section\textgreater{} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
{\bf{v-show}} & Condition (no \seqsplit{alternative)} & \textless{}section v-if='var == true'\textgreater{}show me\textless{}/section\textgreater{} \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
{\bf{v-for}} & Loop (iterate dataStore elt) & \textless{}li v-for='elt in dataStoreElt'\textgreater{}...\textless{}/li\textgreater{} \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
{\bf{v-on:event (@event)}} & Event listener & \textless{}button v-on:click='function'\textgreater{}Click!\textless{}/button\textgreater{} \tn 
% Row Count 15 (+ 4)
% Row 4
\SetRowColor{LightBackground}
{\bf{v-bind:elt (:elt)}} & Bind & \textless{}li \seqsplit{v-bind:href='dataStoreElt}.prop'\textgreater{}...\textless{}/li\textgreater{} \tn 
% Row Count 18 (+ 3)
% Row 5
\SetRowColor{white}
{\bf{v-model}} & Bind forms & \textless{}input type='text' \seqsplit{v-model='dataStoreElt'} /\textgreater{} \tn 
% Row Count 22 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\{\{bb\}\} & \{\{bb\}\} & \{\{bb\}\} \tn 
% Row Count 23 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Share data between parent/child components}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Direct data sharing between 2 linked components is possible in 3 ways: {\bf{props}} \& {\bf{slot}} for {\emph{parent}} communicating to {\emph{child}}, and {\bf{\$emit}} for {\emph{child}} communicating to {\emph{parent}}.% Row Count 4 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{props (Parent \textgreater{} Child)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Parent /}} & {\bf{Child /}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\emph{import Child from './url' \{\{nl\}\}components : \{Child\} }}\{\{nl\}\}\textless{}Child url= '/contact '\textgreater{} & {\emph{props : {[}'url'{]} or props : \{url : 'url'\}  }}\{\{nl\}\}\{\{nl\}\}\textless{}a  :href= 'url'\textgreater{} \tn 
% Row Count 6 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{slot (Parent \textgreater{} Child)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Parent /}} & {\bf{Child /}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\emph{import Child from './url'  \{\{nl\}\}components : \{Child\}}} \{\{nl\}\}\textless{}Child v-slot:slotName \textgreater{}anything to replace default content \textless{}/Child\textgreater{} & \{\{nl\}\}\{\{nl\}\}\textless{}button\textgreater{} \textless{}span\textgreater{}fixed data\textless{}/span\textgreater{}\{\{nl\}\} ~~~\textless{}slot name='slotName'\textgreater{}default free content \textless{}/slot\textgreater{}\{\{nl{]}{]} \textless{}/button\textgreater{} \tn 
% Row Count 8 (+ 7)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{Slots are {\bf{free areas}} that can be named to use more than one. Default content of slots set in {\emph{child component}} can be replaced as needed.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{\$emit (Child \textgreater{} Parent)}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{Parent /}} & {\bf{Child /}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
{\emph{import Child from './url' \{\{nl\}\}components : \{Child\} \{\{nl\}\}data() \{ return\{ msg : '' \} \} \{\{nl\}\}methods : \{ setMsg(event) \{ this.msg = event.msg \} \} }}\{\{nl\}\}\textless{}Child @event-perso = 'setMsg' /\textgreater{} & {\emph{methods : \{ eventPerso()\{ \seqsplit{this.\$emit('event-perso'},\{msg : 'hello'\}) \} \}}}  \{\{nl\}\}\{\{nl\}\}\{\{nl\}\}\{\{nl\}\}\textless{}button @click = 'eventPerso'\textgreater{} \tn 
% Row Count 12 (+ 11)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Router}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{{\bf{Install:}} `vue add router`   //  {\emph{App.vue wil be erased!}}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{{\bf{route}} = \{ {\bf{path}}:'/', {\bf{name}}: 'Name', {\bf{component}}: ImportedName {\emph{OR}} () =\textgreater{} \seqsplit{import('../path/Component')} \}} \tn 
% Row Count 5 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{{\bf{\textless{}router-view /\textgreater{}}} - Display point} \tn 
% Row Count 6 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{{\bf{\textless{}router-link to='/path'\textgreater{}\textless{}/router-link\textgreater{}}} - Link using routes (no reload page)} \tn 
% Row Count 8 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{17.67cm}}{\bf\textcolor{white}{Lifecycle}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{17.67cm}}{{\bf{beforeCreate()/created()  beforeMount()/mounted()  beforeDestroy()/destroyed()}}} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{17.67cm}}{Function used in {\bf{export default \{...\}}} to define the moment some operations must be ignitiated.} \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Vuex - General dataStore}}  \tn
% Row 0
\SetRowColor{LightBackground}
{\bf{State}} (dataStore) & Paths: {\bf{\$store.state}}\{\{nl\}\}pluggin: {\bf{\{ mapState \}}} - use spread operator ... \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Pluggin must be used in {\bf{computed}}\{\{nl\}\}* {\bf{objects}} can be used in place of {\bf{strings}} to rename variables & {\bf{Vuex store/}} {\emph{state: \{key: 'value'\}}}\{\{nl\}\}{\bf{Component/}} {\emph{Import \{ mapState \} from 'vuex'}} \{\{nl\}\}{\emph{computed: \{ ...mapState({[}'var1','var2'{]}) \} }} * \tn 
% Row Count 12 (+ 8)
% Row 2
\SetRowColor{LightBackground}
{\bf{Getters}} (computed) & Path: {\bf{\$store.getters}}\{\{nl\}\}pluggin: {\bf{\{ mapGetters \}}} - use spread operator ... \tn 
% Row Count 17 (+ 5)
% Row 3
\SetRowColor{white}
Pluggin must be used in {\bf{computed}} & {\bf{Vuex store/}} {\emph{getters: \{ setDate(state) \{ return `\$\{state.day\}:\$\{state.month\}:\$\{state.year\}` \}}} \{\{nl\}\}{\bf{Component/}}\{\{nl\}\}{\bf{direct/}} {\emph{computed : \{ date() \{this.\$store.getters('setDate')\} \}}} \{\{nl\}\}{\bf{pluggin/}} {\emph{import \{ mapGetters \} from 'vuex' }} \{\{nl\}\}{\emph{computed : \{...mapGetters({[}'setDate'{]}) \}}} \tn 
% Row Count 33 (+ 16)
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{17.67cm}{x{8.635 cm} x{8.635 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{17.67cm}}{\bf\textcolor{white}{Vuex - General dataStore (cont)}}  \tn
% Row 4
\SetRowColor{LightBackground}
{\bf{Mutations}} (change State) & Path: - no access from components -\{\{nl\}\}Pluggin: - none - \tn 
% Row Count 3 (+ 3)
% Row 5
\SetRowColor{white}
Isolated from components\{\{nl\}\}CAPITALIZED\_NAME\{\{nl\}\}args: {\emph{state, payload}} & {\bf{Vuex store/}} {\emph{state: \{ count: 0 \}}} \{\{nl\}\}{\emph{mutations: \{ \seqsplit{INCREASE\_COUNT(state}, amount) \{state.count += Number(amount)\} \}}} \tn 
% Row Count 10 (+ 7)
% Row 6
\SetRowColor{LightBackground}
{\bf{Actions}} (commit changes to State) & Path: {\bf{\$store.dispatch}}\{\{nl\}\}Pluggin: {\bf{\{ mapActions \}}} - use spread operator ... \tn 
% Row Count 15 (+ 5)
% Row 7
\SetRowColor{white}
Pluggin must be used in {\bf{methods}}\{\{nl\}\}Apply mutators to State\{\{nl\}\}args: {\emph{context, payload}} & {\bf{Vuex store/}} {\emph{actions: \{ updateCount(context,amount) \{context.commit('INCREASE\_COUNT', amount)\} \}}} \{\{nl\}\}{\bf{Component/}} \{\{nl\}\}{\bf{ {\emph{direct/}} methods: \{ update() \{this.\$store.dispatch('updateCount')\} \}}} \{\{nl\}\}{\bf{pluggin/}} {\emph{import \{ mapActions \} from 'vuex' \{\{nl\}\}methods: \{ ...mapActions({[}'updateCount'{]}) \}}} \tn 
% Row Count 31 (+ 16)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{17.67cm}}{All data contained in this dataStore is accessible and changeable to any component.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}



\end{document}