Using Nuxt Site as a template

Question

I'm getting started with nuxt, and vue. I want to create a simple site using vue and then turn it into a static site using :

nuxt generate

I've been able to do this using nuxt and vuetify (you can see this at https://github.com/kc1/nuxt4 ).

Is there a way to use this nuxt project as a template and perform a 'find and replace' with a file to produce an individualized website ?

As an example. The toolbar component is:

<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 a way to replace:

Title - > My project
Link One -> Home
Link Two -> About
Link Three -> Contact

Either before or after generating it as a static site?

EDIT:

following the https://nuxtjs.org/guide/vuex-store page for nuxt 2.34, In /store/store.js I Placed:

export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]

})

I'm still getting:

ERROR  [Vue warn]: data functions should return an object:                                                                                         20:59:31
https://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 I fix this?

EDIT2:

<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>

// import toolbarActions from '~/store/store.js'

export default {
computed: {
toolbarActions() {
  return this.$store.getters.loadedPosts
.....

Now I'm seeing:

Yoarthur Yoarthur · Accepted Answer · 2018-12-29T23:24:34

Use Vuex to acompplish that.

create a file in store : /store/store.js

in there.

const store = new Vuex.Store({
  state: {
    toolbarActions : [ 'My project', 'Home', 'About', 'Contact' ]
  }
})

in your component

<template>
...
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn>
    </v-toolbar-items>
...
</template>

export default {
  computed: {
    toolbarActions() {
      return this.$store.getters.loadedPosts
    }
  }
}

This will give you insight of how Vuex works at the beggining.

Edited

Use the computed property instead. Let me know.

Edited 2

new Vue({
	el: '#app',
  computed: {
    toolbarActions: function() {
      return [ 'My project', 'Home', 'About', 'Contact' ]
    }
  }

})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.15/vuetify.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.15/vuetify.css" />
     
     <div id="app">
     <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>
     </div>

P.D.: <v-toolbar-items class="hidden-sm-and-down"> are hidden the buttons in small devices.

Once clicked on run snippet, click in fullpage to see it working.

Using Nuxt Site as a template

2 Answers