[![enter image description here][1]][1]
Exploring the world of nuxt and vue, I aim to build a basic website using vue and then convert it into a static site utilizing:
nuxt generate
I have successfully accomplished this task with nuxt and vuetify (check it out at https://github.com/kc1/nuxt4). However, I am now curious if there is a method to use this existing nuxt project as a template and perform a 'find and replace' operation within a file to create a unique website?
For instance, let's consider a component like the toolbar which looks like this:
<template>
<v-toolbar color="indigo" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="white--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
</template>
Is there an approach to substitute the default values like:
Title -> My project
Link One -> Home
Link Two -> About
Link Three -> Contact
Prior to or after converting it into a static site?
UPDATE:
Following the instructions laid out in the https://nuxtjs.org/guide/vuex-store page for nuxt version 2.34, I added the following code in /store/store.js:
export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})
Despite this adjustment, I encountered the following errors:
ERROR [Vue warn]: data functions should return an object: 20:59:31
https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
found in
---> <Menu> at components/menu.vue
<Default> at layouts/default.vue
<Root>
ERROR [Vue warn]: Error in render: "TypeError: Cannot use 'in' operator to search for 'toolbarActions' in undefined" 20:59:31
found in
---> <Menu> at components/menu.vue
<Default> at layouts/default.vue
<Root>
How can this issue be resolved?
UPDATE 2:
<template>
<v-toolbar color="indigo" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="white--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat v-for="action in toolbarActions" :key="action">{{action}}</v-btn>
<!-- <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn> -->
<!-- <v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn> -->
</v-toolbar-items>
</v-toolbar>
</template>