'Mounted hook not being called in Nuxt component in production (full static)?

I have a component that is included on a page in Nuxt.

This component has the following lifecycle hooks:

<script>
export default {
    name: 'MyComponent',
    created() { alert('oh hai!') },
    mounted() { alert('oh hai again!') }
}
</script>

This works fine in development. However when I export the site full static (nuxt generate) the code in the created and mounted hooks does not run -- the alerts never appear when the page is loaded.

I feel like I must be missing something obvious, but I can't figure it out. Do the created/mounted lifecycle hooks get called on components if they are used on full static nuxt sites? If not, what is the recommended way to initialize the code that is used to control a component?

Solution 1:^[1]

I resolved similar problem, when change type import needed component. Do not flirt with lazy import;)

Was:

components: {
    TheError,
    TheHeader,
    TheMain,
    'the-map': () => import(/* webpackPrefetch: true */ './TheMap')
},

Mounted hook not being called

Now:

components: {
    TheError,
    TheHeader,
    TheMain,
    TheMap
}

Works!

Solution 2:^[2]

i've found that for components created() hook of a component runs but not mounted() so try replacing mounted to created if that works

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	gorevanova
Solution 2	Baraja Swargiary

'Mounted hook not being called in Nuxt component in production (full static)?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]