I am trying to use vuejs in a multiple pages app, say I have two pages:
/home and /account, I created two js files, home.js and account.js, home.js is included in home.html and account.js is included in account.html, this works quite well until I started to use webpack 4, webpack combines files into a single main.js, how to work with a single main.js in my use case? thanks
You should be able to have more than 1 Vue instance, for example, for home.js:
new Vue({
el: '#home'
...
and for account.js:
new Vue({
el: '#account'
...
and then just wrap the content of home.html with an id="home" and wrap the content of account.html with id="account"
You can take a look at this template as an example or starting point. The idea is the same no matter the backend technology.
https://github.com/danijelh/aspnetcore-vue-typescript-template
You can create modules for pages which you want to enhance with Vue and import its bundle. There's also a medium article for more details :)
Related
I want to use Django admin but I want to change some pages or change some elements in some pages. I want to use vue.js for this work. I don't have enough time to change all templates. how can I do this?
The Django docs has a page on overriding the admin templates from there it's as easy as to add vue.js in a script tag and do all your vue stuff in that template. Just be aware that both Django and Vue uses {{variable}} syntax for variables.
The best here is to change vue's syntax.
ex:
new Vue({
el: '#app',
data: data,
delimiters: ["<%","%>"]
});
I have a .NET Core 3.x project, where I also have added an Web API. On one of the pages I have a Vue-page.
Because I was not competent enough to set up a Vue-project inside the .net-project. I decided to have Vue on only one page (to show data).
So how can I use Vuex, when it is only one page that uses Vue?
The most important part of the site is this page because it will be i kind of lookup in the catalog. And to do that I want to browse through data stored in Vuex.
Is this possible. Or is it another way that is easier?
You can still use vuex with the vue cdn or within a script tag. When you initialize a new vue element, import the store variable and pass it into the vue element. You will then be able to access like normal.
Something like:
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
I am trying to use a component in my view file. The following doesn't work
When I try to mount the component in my view with <CampaignCreate></CampaignCreate>
const app = new Vue({
el: '#rewards-app',
components: {
CampaignCreate,
}
});
If I change it to:
const app = new Vue({
el: '#rewards-app',
components: {
'campaign-create': CampaignCreate,
}
});
I can mount the component in my view file as <campaign-create></campaign-create> without a problem. I am trying to understand the reason behind this. I am currently on vuejs 2.x
In short, it's because HTML is case-insensitive. There was a big discussion in VueJS tracker opened 2 years ago by Evan You himself with the following reasoning:
So as we all know, HTML is case insensitive. myProp="123" gets parsed
as myprop="123" and this has led to the caveat in Vue.js where you
have to use my-prop="123" to refer to a prop declared in JavaScript as
myProp. This bites beginners quite often.
The issue was eventually closed with decision to stay on the same track. Here's a telling quote:
Essentially, the problem exists because js and html are different
technologies and use different naming systems. And using same
case(kebab or camel) in both technologies will shift weirdness from
one place to another but the underlying problem will persist So I
believe, best we can do is draw a line. and the current line i,e.
kebab case in html context and camelCase (and PascalCase) in js
context is very good.
Ok, I am JUST getting started with vue.js. I've added a TypeScript vue.js project into an exiting Visual Studio 2017 solution. Out of the box that worked pretty well.
But now, I'm trying to do something that should be pretty simple... create some pages and navigate between them. I've found 3 or 4 tutorials but none of them match enough what I already have to make them adaptable, and I'm having a hard time finding what I need in vue.js's documentation.
Here's a screenshot of what my project looks like right now....
And here's the App.vue file:
And this is the router/index.js file:
With all of this, here's what is rendered in the browser:
This ALMOST correct except for two things:
1) The links for Home and Time Sheet are not rendered as clickable html links. This is what they look like in dev tools:
2) I thought that the Home component would be loaded by default, but it's not.
So, two questions:
1) How fo I make the links clickable?
2) Why doesn't Home load by default?
EDIT:
Here's the main.ts file:
You would need to set up vue-router on your main.js file as well. here is an example:
import router from './router'
new Vue({
render: h => h(App),
router
}).$mount('#app')
This might be a bit of an odd question, but I'll try to explain.
I'm looking to build a vue based video player widget for a client's Drupal website. The idea is to create something he can just drop in, like a JQuery plugin. However, I'd really like to leverage Vue's Single File Components (with Webpack) so I can keep everything all bundled together.
My first thought would be to use the Vue CLI, npm build and then reach into the dist/ folder and pull out the following to drop in:
<link href=/static/css/app.cf6f127cf50f4c0b2424d30fdc56c3a4.css rel=stylesheet>
<div id="my-widget"></div>
<script type=text/javascript src=/static/js/manifest.e12c1c4a9566f686d69f.js></script>
<script type=text/javascript src=/static/js/vendor.47037dd92c40b3f38949.js></script>
<script type=text/javascript src=/static/js/app.3f1bab5cc5b1be1127b2.js></script>
Although this feels off, is there a better way to achieve this? Keep in mind his website is NOT a Vue app, but I want this widget to be built LIKE a Vue app.
I don't know if I understand 100 percent, as far as I know, it is possible. It doesn't matter how you bundle your app. It is a matter of architecture. You can use vue.js partly, like widget.
First when you set Vue instance, just set element with your target element.
new Vue({
el: '#my-widget'
});
If you want your client to set element himself, make some functions to create vue widget. (considering multiple vue instance or state sharing blah blah...)
// you can provide simple function like this (I'm sure it needs to be more.)
const Widget = {
createWidget(el) {
new Vue({
el: el
});
}
};
// on client side
Widget.createWidget('#his-widget');
On bundling, if you want your widget to be bundled together with client's Drupal website. Let him import your widget like other libraries. You can build your widget with npm run build in vue-cli and then give it to him so that he can include it.
Thanks to #yuriy636 for answering my question. The CLI 3.0 allows to build as a library or a web component. docs
Also I found the following article which goes into more depth
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/