I have a uni assignment with really vague instructions. I basically need to take a html file from an older project version, move the form within the file to a vue component, render the html file and the vue component within it. I used routing for all my links because it’s easier, but now I can’t figure out how to get the html to render.
Their instructions are add <div id="vue-form-container">
and then
<script>
import { createApp } from 'vue';
import ExampleComponent from './ExampleComponent.vue'; // Adjust path as needed
const app = createApp(ExampleComponent);
app.mount('#vue-form-container');
</script>
i already using app.mount(#app) instead of app.mount('#vue-form-container'); (and changing the div id) which didn’t work.
is this even possible? i’ll put my index.js and main.js code in, the contact html and vue components are very basic so their content doesn’t really matter. appreciate any help.
index.js
import { createRouter, createWebHistory } from 'vue-router';
// Other component imports
import ContactPage from '../src/components/ContactPage.vue';
const routes = [
// Other paths, not relevant
{ path: '/contact', component: Contact},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from '../router';
// Create Vue Application
const app = createApp(App);
app.use(router);
app.mount('#app');
App.vue
<template>
<div id="app">
<Header />
<router-view />
<Footer />
</div>
</template>
<script>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Home from './components/HomePage.vue';
export default {
name: 'App',
components: {
Header,
Footer,
Home
},
};
</script>
<style scoped>
@import './styles/styles.css';
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Whispering Leaves</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="./styles/contact.css">
<link rel="stylesheet" href="./styles/styles.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="./main.js" defer></script>
</head>
<body>
<h1>TEST HTML IS RENDERING</h1>
<div id="app">
<contact-form></contact-form>
</div> <!-- Vue app mounts here -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script type="module" src="./main.js"></script>
<script>
import { createApp } from 'vue';
import App from './App.vue'; // Adjust path as needed
const app = createApp(App);
app.mount('#app');
</script>
</body>
</html>
8