I have some method to generate random hexademical color. It will be used in very few (3 or 5) parts of the project. So I want to separate it from main code into some kind of Helper or smth else, and include it when needed (not globally).
I have 2 working ways to do this:
Using mixins. What I don't like is that when you read the code, you can't separate your own methods from methods of mixin.
Using plugins. What I don't like with that is that you have to write import Vue from 'vue' + Vue.use(MyPlugin) every time in all files where you want to use it. After that, you can call it like this.$ColorHelper.getRandomHEX().
So, the question is about aesthetics visualization.
What is the best practices to do such things?
PS: project was created from template with webpack.
Our team decide use function import from files-helpers
For example:
import { getRandomColor, getBackgroundColor } from 'Global/helpers/colorHelper';
// .....
let color = getRandomColor();
What good:
Don't need use excess import + use as in plugins
Method visually stands out, what it not from this
What bad:
Cant see visually what the helper have method. But possible can fixed with aliases. We dont think yet
Vue plugins are global, you only have to call the Vue.use method once. Then they should work wherever you use that particular Vue instance.
In a default project setup you normally don't have multiple Vue instance so it should work globally.
From the docs:
Plugins usually add global-level functionality to Vue.
And:
Use plugins by calling the Vue.use() global method:
Vue.use(MyPlugin)
https://v2.vuejs.org/v2/guide/plugins.html
Related
I'm trying to use this logging package I found in my Vue Project. https://github.com/xpl/ololog
I want to be able to use the logger in my whole project and all my components. Do I have to import the package in every single component I want to use it in or is there a way to make it global?
How can I make an instance for it? Sorry, I am confused about this. Thank you.
You can either:
A. Import the logger on every component
B. Add an instance property to make the log function accessible to all components:
// When you initialize your Vue app
Vue.prototype.$log = myLogFunction
// Now $log is available on all Vue instances via `this`
this.$log("my log");
A is more explicit, B is more convenient.
I have a component library where i would like to standardize the props, component etc.
Thoughts on combining them props/methods/other mixins/etx into one larger mixin
All property names would be the same
Remove duplicated code on refactoring to adjust components from local props/methods/computed/ to "global"
Not all components would have need for every piece of data contained within the mixin - point 4
Would tree shaking remove the unused code on Rollup?
Is this a good idea?
If your component library is not constrained to using Vue 2 you might want to take a look at Vue Composition API to share functionality (methods + reactive state) between different components.
Mixins might not be what you really want to be using because you kind of lose information as to what features/props/methods really will be put inside your component without re-checking the mixin code. You also might run into issues when component options get merged by Vue at runtime. Check out these posts for more information:
https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/
https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
As for sharing props: What I've seen just yesterday (but not yet tried!) in a talk by John Leider - creator of Vuetify - is create a function that returns the props you want to reuse between components. Then you just call said function inside your props definition and use the spread operator.
I'm building a simple TodoMVC app using Vue + JSX, but the documentation seems to be seriously lacking. Thus, I'm writing down the points I need to address as part of a CR to the appropriate projects. The only document I've read as of yet is the guide, which doesn't cover much JSX at all. I don't know much about how the framework works yet, but I sure prefer using the render method over the string templates for performance/network reasons.
question
What's the proper way to create a class name binding in Vue + JSX? In my TodoItem component, creating either a class or className attribute makes Babel throw a compile error complaining the API is deprecated (and suggesting I add several seemingly unrelated dependencies to the mix). Plus, including the class property in the data object seems to change nothing.
secondary question
The lack of documentation, plus the wording on the guide gives the impression JSX is not the "proper" way to write Vue components. Is that so? What's the idiomatic way to do it, given I don't want to ship the compiler along with my app?
links
code on codepan
I sure prefer using the render method over the string templates for performance/network reasons.
If you're writing *.vue files and bundling them with vue-loader (Webpack), the HTML template gets compiled into a JavaScript render function anyway, so there isn't really any kind of performance issues in that sense.
On the other hand, if you're writing your Vue components with string templates like this:
new Vue({
template: '<div>Hello</div>'
})
then you'll need the Vue template compiler at runtime to convert the string into a render function.
Typically people would opt for writing render functions manually if they need to do something specific that would be difficult/impossible to do with the HTML template alone.
You've probably already read the docs, but just in case, the relevant sections are:
Render Functions & JSX
The Data Object In-Depth
babel-plugin-transform-vue-jsx Usage
What's the proper way to create a class name binding in Vue + JSX?
You would just bind to the class attribute like you would any other attribute:
<div class={this.klass}>
data() {
return {
klass: 'foo'
}
}
The lack of documentation, plus the wording on the guide gives the impression JSX is not the "proper" way to write Vue components. Is that so? What's the idiomatic way to do it, given I don't want to ship the compiler along with my app?
JSX is definitely supported, but it is not the recommended approach. The recommended approach is to write *.vue files and load them with vue-loader (if using Webpack).
Vue comes in two versions, one with and one without the template compiler. The one with the compiler included is only for development and should not be used for production builds (unless you require string template to render function compilation at runtime, which is unlikely). See Explanation of Build Files for more info.
Typically you write HTML string templates, and they get compiled to render functions (by vue-loader) at build time.
I am trying to find the best way to store environment variables such as API and CDN servers DNS.
I saw my other answers, most recommended on one of the following:
Store in global - Don't like it. Hate throwing stuff to global, much rather using proper scopes. Also, seems a bit of an anti-pattern, but if you disagree I'de love to hear your arguments.
Keep the environment data in a separate file, and load current environment from that file - won't work for me as those are dynamic variables that might change (switching to another environment, CDN changes etc.)
Pass it via props - I don't like the idea of passing the config down 7 components whenever I need the CDN to show an image.
Ideally, I would like to have an option to import a lib in different places in the app. Basically something like this:
# when app starts, somewhere in the master container
import envConfig from './envConfig'
# load config from API
API.loadconfig().than((data) => envConfig.setConfig(data))
Then, in other files
import envConfig from './envConfig'
const cdn = envConfig.cdn;
Does that make any sense? is there a better way to achieve the same goal?
How can I make an import module to have a state?
In my project, I had to pass down some global variables so that I can access them anywhere in my app. Here's how I achieved that-
Wrap your application inside a global component like App.
Render children inside that App like this-
<div>
{React.cloneElement(this.props.children, { ...this.props.globalState })}
</div>
If you're using Navigator in your app, you can pass global variables through the Navigator. Please refer to this file to see how to exactly implement that. It's 4 months old code, please forgive me for that.
Good luck!
In learning the awesome Aurelia framework, I have learnt that you can use the following composition techniques however I am not sure what would be the difference.
<compose view="./nav-bar.html"></compose>
or
<require from="./nav-bar.html"></require>
Any clarification is appreciated.
<require> imports resources that you want to use in the view. It's conceptually similar to a require() JavaScript call in AMD or CommonJS module code (or an import statement in ES6 code). You would use <require> to import a custom element or custom attribute that you wanted to use in your view. You'll still need to explicitly render it like <nav-bar></nav-bar>.
<compose> renders the specified view.
We will use already created templates in our app and we need to use in the current app via require.
you can use css and javscript files also in require.
But from compose you can render your views by giving your view modal name.
You can see this link to have a better idea about compose.
http://patrickwalters.net/best-parts-of-aurelia-1-composing-custom-elements-templates/