I am a long-time backend engineer trying to get my head around Vue 3. In order to do this I am developing a small cover letter generator app, with the intent of allowing people to manage their own cover letter templates (defined as a json object containing metadata, a Mustache string for the template text, and a variable number of sections which can be toggled on or off depending on whether or not they are relevant for the job the candidate is applying to) and then quickly and easily substitute in information like job title and employer name.
To support this, I’ve created a Pinia store as follows to manage templates (with the default template initialized by default):
import { defineStore } from 'pinia'
export const useTemplateStore = defineStore({
id: 'template',
state: () => ({
templates: {
default: {
id: 'default',
name: 'Default Template',
templateText: `To whom it may concern,
I am interested in joining {{companyName.value}} as a {{jobTitle.value}}. In addition to my great admiration of {{companyName.value}}'s brand, I feel my skills and experience would make me an ideal member of the {{companyName.value}} team.
{{#managementExperience.isSelected}}
{{managementExperience.value}}
{{/managementExperience.isSelected}}
Thank you,
Wile E. Coyote`,
sections: [
{
key: 'managementExperience',
label: 'Line Management Experience',
text: 'I am an experienced line manager, having managed teams for 10 years.',
isSelected: false
}
]
}
}
}),
actions: {
addTemplate(template) {
this.templates[template.id] = template
}
}
})
I’ve implemented a view which allows the user to select a template, enter some global params (companyName and jobTitle), and which has a checkbox and label generated for each ‘section’ defined as part of the template. This looks as follows:
<script setup>
import { computed, ref } from 'vue'
import Mustache from 'mustache'
import { useTemplateStore } from '../stores/template'
import { storeToRefs } from 'pinia'
const templateStore = useTemplateStore()
const { templates } = storeToRefs(templateStore)
const selectedTemplateKey = ref('')
const selectedTemplate = computed(() => {
return templates.value[selectedTemplateKey.value]
})
const companyName = ref('')
const jobTitle = ref('')
const globalTemplateParams = computed(() => {
return {
jobTitle: {
isSelected: Boolean(jobTitle.value),
value: jobTitle.value
},
companyName: {
isSelected: Boolean(companyName.value),
value: companyName.value
}
}
})
const letterContent = computed(() => {
let template = ''
if (selectedTemplate.value) {
template = selectedTemplate.value['templateText']
}
const params = {
...globalTemplateParams.value
}
return Mustache.render(template, params)
})
</script>
<template>
<div id="home-view-content" class="row p-1 pt-4">
<div class="col">
<div class="row">
<div class="col"><h1>Generate Cover Letter</h1></div>
</div>
<div class="row">
<div id="options-column" class="col-4 primary-bordered">
<div class="row pt-2">
<div class="col"><h2 class="text-center">Template Selection</h2></div>
</div>
<div id="template-selection-row" class="row pt-2 align-items-center">
<div class="col-auto">
<label for="templateSelector" class="col-form-label">Select a Template</label>
</div>
<div class="col">
<select
id="templateSelector"
v-model="selectedTemplateKey"
class="form-control form-select"
>
<option
v-for="(template, index) in templates"
:key="template.id"
:value="template.id"
:selected="index === 0"
>
{{ template.name }}
</option>
</select>
</div>
</div>
<div class="row pt-4">
<div class="col"><h2 class="text-center">Template Options</h2></div>
</div>
<div id="template-options-row" class="row pt-2">
<div class="col form-check form-switch">
<template v-if="selectedTemplate">
<template v-for="section in selectedTemplate.sections" :key="section.key">
<input :id="`${section.key}-input`" class="form-check-input" type="checkbox" />
<label class="form-check-label" :for="`${section.key}-input`">
{{ section.label }}
</label>
</template>
</template>
</div>
</div>
</div>
<div id="letter-area" class="col">
<form class="row gx-3 align-items-center">
<div class="col-auto">
<label for="company-name" class="col-form-label-lg">Company Name:</label>
</div>
<div class="col">
<input
id="company-name"
v-model="companyName"
type="text"
class="form-control form-control-lg"
/>
</div>
<div class="col-auto">
<label for="job-title" class="col-form-label-lg">Job Title:</label>
</div>
<div class="col">
<input
id="job-title"
v-model="jobTitle"
type="text"
class="form-control form-control-lg"
/>
</div>
</form>
<div class="row pt-3">
<div class="col">
<div id="letter-output" class="card">
<div class="card-body vh-85">{{ letterContent }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
#letter-output {
div {
white-space: preserve;
}
}
</style>
The result of the above is as follows:
I am struggling to wrap my head around how to reliably capture the state of the dynamically generated checkboxes so I can package them into the same json structure the global params are in and send them to Mustache for use in the template.
Any help that could be provided (including tips on improving what I’ve already implemented) would be greatly appreciated.