6

I'd like to use the same loader as Laravel Nova uses when it's components are loading. I can't get it to compile. It never recognizes where to load the LoadingCard component from. Any help would be appreciated.

<template>
    <div>
        <heading class="mb-6">Tax Calculator</heading>

        <loading-card :loading="loading" class="card relative overflow-hidden w-1/3">
            <div v-if="countries.length">
                <!--Make form-->
            </div>
        </loading-card>
    </div>
</template>

<script>
    import LoadingCard from 'laravel-nova'
    export default {
        mounted() {
            let vue = this;
            Nova.request().get('/nova-vendor/tax-calculator/mount')
                .then(response => {
                    vue.countries = response.data.countries;
                    vue.states = response.data.states;
                });
        },
    }
</script>

<style>
    /* Scoped Styles */
</style>
Cam
  • 988
  • 1
  • 12
  • 25

2 Answers2

9

Figured it out. Apparently all the Nova built-in components are available globally. Didn't realize this. All I needed to do to get it to compile was remove the import statement. I modified the code as follows:

<template>
    <div>
        <heading class="mb-6">Tax Calculator</heading>

        <loading-card :loading="loading" class="card relative overflow-hidden w-1/3">
            <!--Make form-->
        </loading-card>
    </div>
</template>

<script>
    export default {
        mounted() {
            let vue = this;
            Nova.request().get('/nova-vendor/tax-calculator/mount')
                .then(response => {
                    vue.countries = response.data.countries;
                    vue.states = response.data.states;
                });
        },
    }
</script>

<style>
    /* Scoped Styles */
</style>
Cam
  • 988
  • 1
  • 12
  • 25
1

For those looking for the list of all the global laravel nova vue components, you can find here:

nova/resources/js/components.js
Lucas Dalmarco
  • 256
  • 2
  • 13