im trying to wrap my old website with Vue, so all the old jQuery scripts should still run and all the old HTML should display, however for some reason the el and everything inside it is being removed.
This is when using the webpacked version of the script, so for example:
<html>
<head></head>
<body>
<div id="wrapper">
<p>dsadfasfasfasfas</p>
<p>dfasdsadasdasdas</p>
</div>
</body>
<script src="/assets/js/app.min.js"></script>
</html>
Would display nothing within the body tag. But if I import Vue at the top of the website, and put the below code in place of the webpacked version it works fine!
window.app = new Vue({
el: '#wrapper',
data: {
test: 'hello world'
},
created() {
console.log('Vue Running');
}
});
Edit
Also this is the app.js which gets compiled:
import Vue from 'vue';
// window.EventBus = new Vue();
window.app = new Vue({
el: '#wrapper',
data: {
test: 'hello world'
},
created() {
console.log('Vue Running');
}
});
Edit
Here is my webpack.config.js:
const path = require('path');
module.exports = {
mode: 'production',
entry: [
'./resources/js/vue/app.js'
],
output: {
filename: 'app.min.js',
path: path.resolve(__dirname, 'public_html/assets/js/vue')
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
Edit 2
Just removed the import vue from 'vue', and imported it using the normal script src=... way and it works. I was under the impression if I import vue and compile then this would include vue in my website?
from Adding Vue to existing old website, removing the div instead of displaying old html
No comments:
Post a Comment