Exploring the possibilities with a Nuxt Site as a foundation

Question

Exploring the possibilities with a Nuxt Site as a foundation

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

// import toolbarActions from '~/store/store.js' export default { computed: { toolbarActions() { return this.$store.getters.loadedPosts ..... Now I'm seeing: [![enter image description here][2]][2] [1]: https://i.sstatic.net/ekB7R.png [2]: https://i.sstatic.net/OOeZT.png

javascript vue.js nuxt.js

Answer 1

Answer №1

Explore the concept of environment variables.

I recommend creating a JavaScript file to store values, exporting them, and utilizing these variables in your Nuxt components.

Alternatively, consider utilizing Vuex store. You can establish a module such as 'mainMenu' to store information like links, titles, and URLs.

Answer 2

Explore the concept of environment variables.

I recommend creating a JavaScript file to store values, exporting them, and utilizing these variables in your Nuxt components.

Alternatively, consider utilizing Vuex store. You can establish a module such as 'mainMenu' to store information like links, titles, and URLs.

Answer 3

Answer №2

Try using Vuex to achieve this.

Start by creating a file in the store: /store/store.js

Inside the file, add the following:

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

In your component, implement the following:

<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 a good understanding of how Vuex works from the onset.

Update:

Instead, try utilizing the computed property. Let me know if it works for you.

Update 2:

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

})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6016150520524e554e5251">[email protected]</a>/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>

Additional Note:

<v-toolbar-items class="hidden-sm-and-down">

hides buttons on small devices.

After clicking on run snippet, select fullpage to see it in action.

Answer 4

Try using Vuex to achieve this.

Start by creating a file in the store: /store/store.js

Inside the file, add the following:

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

In your component, implement the following:

<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 a good understanding of how Vuex works from the onset.

Update:

Instead, try utilizing the computed property. Let me know if it works for you.

Update 2:

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

})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6016150520524e554e5251">[email protected]</a>/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>

Additional Note:

<v-toolbar-items class="hidden-sm-and-down">

hides buttons on small devices.

After clicking on run snippet, select fullpage to see it in action.

Exploring the possibilities with a Nuxt Site as a foundation

Answer №1

Answer №2

Similar questions

Exploring Vue 3's Dynamic Placeholder Feature with a Global Component

What's the best way to include various type dependencies in a TypeScript project?

Connect the input field to a dictionary

The error message "TypeError: defineCall is not a function. require() fails" indicates that

Limiting page entry with passport.js and express middleware

The Material UI Popover is appearing outside the designated boundaries

Retrieving a Collection of Items Generated in the Past Day from a Specific Dataset Using JavaScript

How can I add navigation dots to my slider?

Steps for aligning the upper rectangular text in the center of the larger rectangular border

Organize a collection of items in AngularJS

NodeJs: Dealing with package vulnerabilities stemming from dependent npm packages - Tips for resolving the issue

Learn how to properly display the state array within a React component. Even though the array is present in the state, you may encounter issues where it

What advantages do constant variables offer when selecting DOM elements?

The userscript will keep the window open as long as it remains inactive

Continuously performing a task in Node.js every 2 minutes until a JSON file, which is being monitored for changes every few seconds

"Experience a unique website layout with varying designs on desktop and mobile devices while using the React technology to enable desktop

Enhancing State in React Component through Prop Update

The Vue component is not displaying the image source data as expected

Tips for sorting through and minimizing data based on the most recent date

data not populating in datagrid upon first load