How to add vue.js to existing webpack project?
How to add vue.js to existing webpack project?
1 answer
by
ryleigh ,
a year ago
@mallory_cormier
To add Vue.js to an existing webpack project, you can follow these steps:
- Install Vue.js using npm:
1
|
npm install vue |
- Update your webpack.config.js file to include Vue.js as an entry point:
1 2 3 4 5 6 7 |
module.exports = {
entry: {
app: './src/index.js',
vue: 'vue'
},
// rest of your webpack configuration
}
|
- Update your index.js file (or main entry file) to include Vue:
1 2 3 4 5 6 |
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
|
- Create a new Vue component in your project (e.g. App.vue):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template>
<div>
<h1>Hello, Vue.js!</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* Add your styles here */
</style>
|
- Build your project using webpack:
1
|
webpack |
- Include the bundled JavaScript file in your HTML file:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Vue.js App</title> </head> <body> <div id="app"></div> <script src="dist/bundle.js"></script> </body> </html> |
After following these steps, you should have successfully added Vue.js to your existing webpack project. You can now start creating Vue components and building your application using Vue.js.
Related Threads:
How to add existing non-git project to bitbucket?
How to add typescript to vue 3 and vite project?
How to add an array to an existing collection in mongodb?
How to add an existing schema to mysql on windows?
How to add existing custom type to graphql schema?
How to add a value in existing value in mongodb?