Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

nmtechnology's avatar

Vue3 Not detected?!?!?!?!?!

I followed all Vue tutorials here and at VueSchool verbatim and the "Vue 3: Step By Step" vids on the Laracasts Youtube channel and I can't seem to get my VUE components to show up at all, using even the most simple and basic setup, even with writing all the code for the component on the same HTML file. I have noticed each and every video I have tried to watch everyone does it differently and makes it hard to compare and contrast it seems..

Can someone help and look over my syntax? I know it's a mess and is wrong. I also worry my vite.config files are leaving out vue somehow. I will post my config files here for you too. Thank you I just want to move on.

0 likes
10 replies
nmtechnology's avatar
 import './bootstrap';



Vue.component('click-counter', {

    data(){
        return {
            count:0
        }
    }
});

let app = new Vue ({
    el:'#root'
})
nmtechnology's avatar

<button @cick="count++">{{count}}</button>

</template>




<script>

export default {
    name: 'click-counter'
};
</script>

counter.vue

This file which is inside my resources directory currently because I tried to import my component here and it does not find the extension and grey's out my importation code as if it can't find the file.

nmtechnology's avatar
<div id="root">
        <h1>VUE 3 holding me back!!</h1>
        <click-counter></click-counter>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

HTML file

nmtechnology's avatar

My vite.config file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});
tykus's avatar

Generally, if you're using Vite you will not be including Vue from a CDN, rather you will build your javascript to include the library and your custom component(s). I don't see how your build process could work without importing Vue; are you running Vite? And finally (for now) your syntax for component registration is Vue 2 syntax, not Vue 3; did you check which version is being used in the tutorial(s) you are following? Can you show your package.json file as well?

I know this stuff can be very frustrating, but there simply are a number of ways that JS bundling can be achieved, Laravel ships with Vite currently; previously with Webpack. And knowing the JS community, there will probably be another one coming this week 🤦‍♂️

nmtechnology's avatar

@tykus Thank you for the review and reply, I actually left off at Vue2 when I quit trying to figure this out and I was trying to ensure I was watching V3 videos and documentation but I must have not done so. I know Vue 3 is different and was watching the "Learn Vue 3 Step by Step" on youtube so I was confident. Honestly I dont actually know what I am running and also what I need as you can see I am including the CDN when it is not needed lol. Will including the CDN when it is no needed, cancel out anything else from running appropriately or is it just unneeded code?

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.24",
        "tailwindcss": "^3.3.2",
        "vite": "^4.3.9"
    },
    "dependencies": {
        "vue": "^2.7.14"
    }
}
nmtechnology's avatar

So I updated to Vue 3 and changed some things around but still not getting my component to show up...heres my files now.

counter.vue

<script>
import { ref } from 'vue';

export default {
    name: 'TestComponent',
    setup() {
        const title = 'Hello, Vue 3!';
        const content = 'This is a component built using Vue 3.';
        const counter = ref(0);

        function incrementCounter() {
            counter.value++;
        }

        return {
            title,
            content,
            counter,
            incrementCounter,
        };
    },
    render() {
        return (
            <div class="TestComponent">
                <h1>{this.title}</h1>
                <p>{this.content}</p>
                <button onClick={this.incrementCounter}>{this.counter}</button>
            </div>
        )
    }
};
</script>

HTML

<div class="TestComponent">
        <h1>Vue3 giving me trouble!</h1>
        <TestComponent></TestComponent>
    </div>

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.5",
        "postcss": "^8.4.24",
        "tailwindcss": "^3.3.2",
        "vite": "^4.3.9"
    },
    "dependencies": {
        "vue": "^3.2.36"
    }
}

app.js

import './bootstrap';



Vue.component('click-counter', {

    data(){
        return {
            count:0
        }
    }
});

let app = new Vue ({
    el:'#root'
})

So I have some questions now that I am here, does it matter where I place my counter.vue file in the directory and does it's name matter? Also is my app.js file still involved in running my component?

nmtechnology's avatar

@MaverickChan Yea I noticed that, thank you, I have upgraded my version of Vue to 3 and still have not gotten the component to show up in the DOM. Now my syntax is really all over the place. I guess I understand less than I figured here, I am confused about what files are supposed to be associated with my Vue component and which dependencies to be running on now that Laravel Mix is no longer shipped with Laravel 10. I guess I can still do the same thing with my Vite file though is add Vue to the plugins configuration. It still doesn't work though, I'm even more unsure what is working and what is not, I am going to work on one thing at a time though, first my syntax and file structure.

nmtechnology's avatar

SOLVED....

Got Vue3 components working by

  1. Upgrading to Vue 3 from Vue 2
  2. Reviewed my vite.config and noticed I needed to add Vue to my plugins.
  3. Used my existing App.js file to write my syntax for establishing a global component.
  4. Created a components file in my /resources/js directory and created a component.vue file to place my components template syntax which is made up of and elements this is what shows up on the Dom.
  5. Placed in my HTML file to enable attached component because inside App.js file you will use .mount('#app') to attach component to the div that has the tag.
  6. Ran NPM RUN DEV and then started server and it shows up on the dom with Vue extension detecting my component.

I was not establishing my component in my javascript and had to ensure my file paths and extensions were all correct. I am level 5 but im getting there guys!

Please or to participate in this conversation.