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/>'
})
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: ["<%","%>"]
});
Introduction:
Currently the application has multiple modules that store data, for example:
- profile
- models
- products
- etc
... later components under the different routes reuse and modify store data.
The problem:
When the application is initially loaded (no matter what route, or component) it's needed that certain logic has to be executed in order to set the needed state of store.
Simple example can be:
Depending on the user's age in the profile:
1. Find a certain model in models
2. And update profile data with the values from model
There are methods like created() or mounted() during component creation, so it made me think about some sort of representational container under the parent route. But I wonder maybe there are different sort of hooks to be added on the initial application load.
You usually feed your initial data into the store from another (persistent) data storage. This can be LocalStorage or an external source (an REST API for instance).
One way of doing this is too postpone app creation until the store is populated and then proceed with app init.
You init code in main.js will look something similar to this
import store from './store'
someAsyncTask()
.then( () => {
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
})
This means that the user needs to wait until everything is loaded so presenting a static preloader (usually added in index.html) is a good option.
The solution for my problem ended up very obvious, but initially escaped my mind. Since the App (root component) is being passed to the Vue instance, all logic required for manipulating can be actually executed there during created or mounted methods.
However if you actually rely on the AJAX calls to be resolved before initialising the app the Radu Dita approach should be taken into the consideration.
I would like to build a pluggable component (preferably in vue) that is going to be used across projects with different frameworks.
global.app = () => {
new Vue({
el: element,
components: { App },
template: '<div><App/></div>',
});
};
I tried instantiating the above vue instance directly into a react component and angular component. It seems to work fine.
I had read articles about plugging vue in react (vuera, react-vue), angular and angularJS. However, I am not sure what kind of performance tradeoffs this idea can bring in.
Is it a good idea to have two different frameworks working together? How else to approach this problem?
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.
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 :)