Where to write "bootstrap" code without main.js

[lbineau]

I'm trying to rewrite an application from pure VueJS to NuxtJS because it seems to avoid a lot of boilerplate code. I have some code running in the VueJS created hook.

new Vue({
  el: '#app',
  ...,
  created () {
     // some code here
  }
})

Where is the best place to write this code? There is no entry point with NuxtJS I'm a bit lost...

_{This question is available on Nuxt.js community (#c1356)}

[NicoPennec]

I suggest you install the Boostrap Nuxt module from the community 👍 https://github.com/nuxt-community/modules/tree/master/modules/bootstrap-vue

Otherwise you can to create a custom plugin:

• read the doc: https://nuxtjs.org/guide/plugins#__nuxt
• study this example: https://github.com/nuxt/nuxt.js/tree/dev/examples/plugins-vendor

[jsonberry]

@NicoPennec OP isn't referring to the Bootstrap library, they are referring to bootstrapping the application. Similar to what you'd find in main.ts in an Angular project.

@lbineau What does your routing structure look like? Is this:

new Vue({
  el: '#app',
  ...,
  created () {
     // some code here
  }
})

... Supposed to be on your main index.html?

Like if I go to www.lbineauSite.com, the main index.html would load up and on that page #app would exist, and you want something done with a lifecycle hook there?

If that's all true, you may want to treat that like your pages/index.vue component.

See: https://nuxtjs.org/guide/views

[lbineau]

@NicoPennec My mistake I'm talking about what @jsonberry says. I would want to find a way to write custom code for Vue instance (https://github.com/vuejs-templates/webpack-simple/blob/master/template/src/main.js) Maybe in page/index.vue could be good but it works only for index page, what about other pages?

[pi0]

@lbineau You can use either plugins or route middleware. The advantage of plugins is that they always run once when page loads suitable for libraries and global hooks and middleware run on each route change suitable like things like auth. For created() and other component hooks, you can add it either at page level as @jsonberry already mentioned or layout level.

[jsonberry]

@pi0's suggestions will probably get you going in the right direction.

@lbineau This depends on what you need to do in your hooks. Can you share an example of what you're trying to accomplish in a created()?

[lbineau]

@jsonberry There are ajax calls to get data used in all the application but I don't think it is the right place to do that. So in the end I add a plugin that return async function that fetch the data and populate Vuex store.

import '../libs/bootstrap'
import VueLanding from '../libs/libraries/VueLanding'

export default async ({ app, store }) => {
  const vueLanding = new VueLanding(app, {
    project: 'hr'
  })
  store.commit('setVueLanding', vueLanding)
  try {
    const response = await fetch(vueLanding.dataFileUrl)
    store.commit('setVueLandingData', await response.json())
  } catch (error) {
    console.error(error)
  }
}

Thanks a lot for your help guys.

[jsonberry]

@lbineau ah! I suggest that you look into the NuxtServerInit action, that might be a Nuxt feature that could be useful to you here. It's for filling the store app wide.

[lbineau]

I looked at the function but I thought it was only for server side, but it seems only context parameter is limited to server side. I will try it with that function thank you.

[lbineau]

@jsonberry I tested but the action is not called but I think it is because I have no server-side, just the frontend. So I think I will have keep the solution with plugin.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.