i'm sure it's a simple thing for you but i lost already hours for that. i'm trying to upgrade my application to 2.0.
I used vuejs on top of the application for some functionality, not as vuejs application. That worked so far with vuejs 1.
previously initiate on body element. but now i get an empty page. i also wrapped it in a div and called it:
const app = new Vue({
el: '#app',
});
and the HTML:
<html>
<body>
<div id="app">
<div class="app-wrapper">
<h1>My stuff</h1>
</div>
</div>
</body>
</html>
i understand that it does overwrite my div content but how can then apply it to a already rendered page? Or how can i load the rendered page into that div again?
Thanks for any help!
Thank's guys for you help.
At the the end, the issue was because I use Webpack and the I need to add to the webpack configuration file.
//webpack.config.js
module.exports = {
entry: {...},
output: {...},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
},
...
};
Updated 02/06/2020
From dist/README.md VueJS
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
Related
My webpack entry file
import Vue from 'vue';
window.Vue = Vue;
Then my index.html
<div>
<div id="app">{{msg}} test</div>
</div>
<script>
console.log(window.Vue);
// This return a valid instance
window.addEventListener('load', () => {
new window.Vue({
el: '#app',
data: { msg: 'Hello World!' }
});
})
</script>
This loads, I briefly see {{msg}} test flash on the screen, and the Vue replaces the view. But its empty. {{msg}} doesnt display Hello World. But also "test" dissappears too, meaning it looks like the whole #app div gets replaced with empty content.
Whats happening here?
Strangest thing is if I include
<script src="main.js"></script>
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
Then it works. But if I dont include it console.log(window.Vue) still shows a valid instance??? So it should work?? Its getting passed correctly from my entry file.
Never seen this before. This is my first time using Vue.js outside of its normal cli context. Im trying to integrate it into an old legacy jQuery project.
I have a Vue app which uses Webpack and dynamic imports:
// App.vue
<template>
<div>
<button #click="isBtnClicked = true">Load lazy component</button>
<LazyComponent v-if="isBtnClicked" />
</div>
</template>
<script>
export default {
name: 'App',
components: {
LazyComponent: () => import('./components/LazyComponent'),
},
data: () => {
return {
isBtnClicked: false,
}
}
}
</script>
// components/LazyComponent.vue
<template>
<p>Hello from lazy component</p>
</template>
When the button in the app is clicked, the Webpack runtime dynamically creates a <script> tag and appends it to the head of the document.
Is there a way to modify the src attribute of this generated <script> tag? I would like to add a dynamic query parameter to it appends the element to the DOM.
The currently generated tag looks something like:
<script charset="utf-8" src="/js/0.js"></script>
And I would like it to look like:
<script charset="utf-8" src="/js/0.js?mytoken=12345"></script>
where mytoken and 12345 are generated at runtime.
I am using webpack 4.44.0, vue 2.6.11, and vue-loader 15.9.3.
According to this and this it doesn't look like you can do this in webpack 4. I'm not entirely sure, but it looks like this pull request may allow it to be done in webpack 5.
I would like to ask for best setup of Vue instances (components), when I do not want use SPA.
My HTML looks like:
<html>
<div id="layout">
<div>Some Layout based content...</div>
<div id="homepage">
<simple-form-component></simple-form-component>
</div>
</div>
<script type=text/javascript src="homepage.js"></script>
<script type=text/javascript src="layout.js"></script>
</html>
Currently I have simple example ot two .js files:
layout.js
homepage.js
// layout.js
import Vue from 'vue/dist/vue.js'
new Vue({
el: '#layout',
});
// homepage.js
import Vue from 'vue/dist/vue.js';
import SimpleForm from '../../../../components/SimpleForm.vue';
new Vue({
el: '#homepage',
components: {
SimpleForm,
},
});
It seems to work fine, but I am suspicious that this is not 100% correct, due to console error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
(found in )
Do you have any ideas/experience how to setup my scenario correctly?
PS: I would like to have my JS split into different files, managed by webpack and distributed by backend.
Thank you,
Mario
I've found workaround v-pre, my HTML will change the line: <div id="homepage" v-pre>. One small issue is, that I will not see my components in Vue Devtools.
I've been working with Vue for sometime, but I've never really tried working with Single File Components alongside webpack. Here's the problem I'm having. I have 2 files: main.js (which contains the Vue root instance) and App.vue (which is a single file component. The code in each file goes as thus:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: { App, },
data(){
return {
greeting: "Hello World!",
}
},
render: h => h(App),
});
App.vue:
<template>
<div id="app">
{{greeting}}
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Please note that I'm using webpack, and the main.js file is meant to be an entry point. The code is bundled to a file called bundle.js.
Now, my problem is that, when the template in App.vue renders, it doesn't show "Hello Word", which is the value of {{greeting}}. I expect that data passed from the root Vue instance in main.js should be available to the App.vue component.
The {{greeting}} isn't evaluated when I put it in my index.html file, which links to bundle.js (the bundled version of main.js)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nothing</title>
<script src="/dist/build.js"></script>
</head>
<body>
<div id="app"></div>
{{greeting}}
</body>
</html>
Does this mean that data in the root vue instance isn't available anywhere? What should I do?
The greeting needs to be in your component's data. This has nothing to do with SFC (Single File Components), it's just the way Vue's templates work: they read from the component's data.
So what you need to do is move the data to the appropriate component, which is tied with the template where you're trying to use.
<template>
<div id="app">
{{ greeting }}
</div>
</template>
<script>
export default {
name: 'App',
data () {
return { greeting: 'Hello World!', }
},
}
</script>
I am new to Vue.js, and am currently trying to use it in an existing solution.
It is not possible for me to use .vue files. It's a standalone system, not using webpack. I need the files locally to make it work. In the example below, I have used .js's online.
I want to use this datepicker: https://github.com/mengxiong10/vue2-datepicker
My problem is that the datepicker isn't rendered.
I don't know how to register the component.
I have tried to isolate what I want to do in a simple standalone example below.
I want to understand, how to register the external component. I have tried a lot of methods, and needs a helping hand.
I hope someone out there have the knowledge and time to help me out.
Thanks in advance!
Here is what I do:
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>
<div id="app">
<input type="text" v-model="Data.SomeText" />
<date-picker v-model="Data.SomeDate"></date-picker>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { Data: '' },
components: {
'date-picker': DatePicker
},
created: function () {
this.Data = {"SomeText":"Hey","SomeDate":"2017-12-24T00:00:00"};
}
});
</script>
</body>
</html>
The vue2-datepicker script is wrapped in a CommonJS module, which has a default export. In order to access it you have to specify you are accesing the default export:
components: {
'date-picker': DatePicker.default
},
Working demo:
var vm = new Vue({
el: '#app',
data: {
Data: ''
},
components: {
'date-picker': DatePicker.default
},
created: function() {
this.Data = {
"SomeText": "Hey",
"SomeDate": "2017-12-24T00:00:00"
};
}
});
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-datepicker"></script>
<body>
<div id="app">
<date-picker v-model="Data.SomeDate"></date-picker>
</div>
</body>
As a sidenote, consider starting to develop with the webpack environment (you can use ready to use templates: https://github.com/vuejs-templates/webpack-simple). It takes effort initially to learn npm and some command line usage, but it is worth it in the long run: it will allow you to use Single File Components, easier plugin importing (some plugins may not be prepared to be included via <script> as it is the one you are using) and other advantages.