How to store "minor" component data?

Question

JavaScript

Hello!

There is a Nuxt.js page component:

<template>
    <div class="page">
        <Intro
            :title="Page Title"
            :description="Page Description" />
        <PageSection
            title="My Skills">
                <SkillCard
                    v-for="skill in portfolio.skills"
                    :key="skill.id"
                    :skill="skill" />
        </PageSection>
        <PageSection
            title="Last Jobs">
                <JobCard
                    v-for="job in portfolio.lastJobs"
                    :key="job.id"
                    :job="job" />
        </PageSection>
    </div>
</template>

Arrays of objects (skills, lastJobs) for dynamic data filling, I get from the database during the loading of the page component. But in the component there is still data not placed in variables - this is:

1. Title and description of the current page (intro.title, intro.description) (a common component for all pages of the site that defines the title "title" of the page).
   
2. The titles of the "sections" of the page (PageSection.title). Well, these are the usual section subheadings on the pages before the content block, which are usually made in the same design for all pages and should logically be present on the page.
   

QUESTION:
- How to organize the storage of this data? Not even so - how to properly abstract and create the necessary dependency for this data, so that you can create a data structure and, say, save it in the database, so that it can also be loaded dynamically when loading data?

I want to separate these strings into some data structures and not store them in the component template directly. Tell me how to do it right? Stack: Nuxt.js Node.js mongoDB. But here it is even interesting without being tied to the stack, some kind of classic solution ... The second item from the list is of particular interest!

Answer 1

I didn’t work with Nuxt.js and I don’t really know how it is with the router either, but in pure Vue all this can be added to the meta for each route. And getting already through $route.meta.titleon the page.