Bdtjtk

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:

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/vue@2.5.21/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.

Read about ENV variables.

Also i would suggest u to create js file with values, add there export and use this file variables in nuxt components.

Another variant could be using Vuex store. U can create there for example module mainMeny and define there number of links, titles, and urls.