CODEWITHSUNDEEP
vue.jsvuejs3
ankurgoel
ankurgoel

Reputation: 41

Need to embed vue component tags inside html file

Instead of making whole application in vue i want to use vue components inside html tags but the code i wrote is not working. Please help

I have executed applications with starting point as vue but i need help in this kind of application

main.js

import { createApp } from 'vue'
import App from './App.vue'
import HelloWorld from './HelloWorld.vue'
const app = createApp(App)
app.mount('#app')

index.html

<html>
  <body>
    <div id="app">
      <hello-world></hello-world>
    </div>
    <script src="main.js"></script>
  </body>
</html>

HelloWorld.vue

<template>
  <div>
    Hello World
  </div>
</template>
<script>
export default {
}
</script>

App.vue

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  
};
</script>

package.json

{
  "name": "4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@vue/compiler-sfc": "^3.2.29",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "vue": "^3.2.29",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2"
  }
}

I can do it with vue 2 but i am not able to do with vue 3

main.js

import Vue from 'vue';
 Vue.component('hello-world', require('./HelloWorld.vue').default);
 new Vue({
     el: '#app',
 });

package.json

{
  "name": "5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm run development",
        "watch": "mix watch",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.21",
    "bootstrap": "^5.1.0",
    "jquery": "^3.6",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "popper.js": "^1.16.1",
    "postcss": "^8.1.14",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.13",
    "sass-loader": "^11.0.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.12"
  }
}

webpack.mix.js

const mix = require('laravel-mix');
mix.js('src/main.js', 'dist')
    .vue();

Upvotes: 0

Views: 1273

Answers (2)

Arif Aminudin
Arif Aminudin

Reputation: 49

You should declare in Global Component on main.js

import ChildComponent from '..';

const app = createApp(App);
app.component("child-component", ChildComponent);
app.mount("#app");

Upvotes: 0

Kujtim ramadani
Kujtim ramadani

Reputation: 11

On the main.js file, where you mounted the app: just below the const, also use your Hello World Component:

app.component('hello-world', HelloWorld);

Copy and paste the below code to your main.js:

import { createApp } from 'vue'

    import App from './App.vue'
    import HelloWorld from './HelloWorld.vue'
    
    const app = createApp(App)
    app.component('hello-world', HelloWorld);
    
    app.mount('#app')

Also, you wouldn't want to edit your public HTML, since you mounted your app to the DOM through the #app. Instead, call out the HelloWorld component in your app.vue file with its respective tags.

<template>
   <div> 
        <hello-world></hello-world>
    </div>
</template>

<script>
    export default {
};
</script>

Upvotes: 1

Related Questions