[Vuejs]-How can i have component render without App.vue

by

0👍

No, that is not possible with the default configuration of vue-cli. If you want to import the component globally or only into a specific module then that is entirely possible, but what you are asking isn’t possible. If you’d like to read more about local and global imports then read here.

There is a potential workaround though. You could create a second div to mount the application into, and then use the MyComponent component as the Base component for that mounting div. However, you will NOT be able to share data directly between the two Vue applications, and this behavior was used to be reserved for Modal insertion; however, nowadays the correct way to do this would be by via teleporting elements. You can read more about teleporting elements here

// main.js
import { createApp } from 'vue';

import App from './App.vue';
import MyComponent from './components/MyComponent.vue';


createApp(App).mount('#app');
createApp(MyComponent).mount('#app2');
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="app2"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Leave a comment