How to import Vue?

Hi All,

I'm currently using Vue and going along with Jeff's tutorial

I'm using a CDN and have the code in the Blade template, I'm only on episode 3 or so

I've run

npm i vue

What would I need to type into my app.js file to import Vue so that I'm no longer using a CDN and can practice when I'm offline?

gych

2 years ago

Level 29

Can you share the contents you currently have in your app js file?

In your app.js file you should do something like this:

import { createApp } from "vue";

const app = createApp({});
app.mount('#app');

JackJones

2 years ago

Level 14

I'm following the tutorial so I currently have this: https://gist.github.com/JeffreyWay/27072fec755753852a74771adcb5ca80

gych

2 years ago

Level 29

@JackJones Remove the script from the blade file and add it in your app.js file

Add this to the head in your app.blade file

@vite(['resources/js/app.js'])

In vite.config.js add app.js as input, like this:

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

In app.js file use this

import { createApp } from "vue";

        let app = {
            components: {
                'app-button': {
                    template: `
                        <button 
                            class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" 
                            :disabled="processing"
                        >
                            <slot />
                        </button>
                    `,

                    data() {
                        return {
                            processing: false
                        };
                    }
                },
            }
        };

        createApp(app).mount('#app');

Please or to participate in this conversation.