Is there a way to get intellisense to work for imported mutation types with Vue and VS Code. I have the Vetur extension installed and I am using constant named mutations.
I want to have a file - mutation-types.js
export default {
MY_MUTATION_TYPE: 'MY_MUTATION_TYPE',
ANOTHER_MUTATION_TYPE: 'ANOTHER_MUTATION_TYPE'
}
then whenever I import:
import mutationTypes from './mutation-types'
I want to have intelisense on the mutationTypes object.
Is this is anyway possible?
Isn't this wrong and throwing syntax errors?
It should be:
export default {
MY_MUTATION_TYPE: 'MY_MUTATION_TYPE',
ANOTHER_MUTATION_TYPE: 'ANOTHER_MUTATION_TYPE',
}
That would make auto complete work.
Since you are doing default export, in your import you also should use default import syntax. In your case mutationTypes can be any name, so that's why autocomplete will not work in the import. It will work on the object itself though:
To make it work in imports, you should use named exports.
Related
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
There are 2 projects generated by vue-cli.
one of it I could add component like this code below:
Vue.component('HeaderBar',require("./components/common/HeaderBar.vue"));
But another one I can't do this , I must code like this:
Vue.component('HeaderBar',require("./components/common/HeaderBar.vue").default);
if not, I will get this error message:
Failed to mount component: template or render function not defined
Is anyone could tell me Why like this ？
Thank you for help .
When using ES6 imports (export default HeaderBar), the exported module is of the format {"default" : HeaderBar}. The import statement handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn't work inline.
If you want to avoid that, use module.exports instead of export default.
I am working with React Native version 0.45.1 and with moment version 2.18.1.
I am trying to change the date according to the device local, but I always get the date in 'en-Us' locale.
I can't import all of the locales as I saw in some solutions since I don't know the device locale in advance.
(for example: https://github.com/moment/moment/issues/2962)
any other options?
I can't import all of the locales as I saw in some solutions since I don't know the device locale in advance.
Actually, you can import all of the locales in moment like this (moment-with-locales is mentioned right there on the homepage):
import moment from 'moment/min/moment-with-locales'
// Or if you are using require instead:
var moment = require('moment/min/moment-with-locales')
Then you should be able to get your device locale with whatever module/method you prefer (in my example, I'll be using Expo) and change the moment locale to it. For example:
var deviceLocale = await Expo.Util.getCurrentLocaleAsync()
moment.locale(deviceLocale)
I won't say that importing everything is the best method for handling this as moment-with-locales is larger than just moment, but it does what you want it to accomplish. You can also go the route of just importing the locales you support as mentioned in that Github comment I linked to.
Instead of importing locale by locale, I'm using this solution to set the locale globally:
import { getDeviceLocale } from "react-native-device-info";
import moment from "moment";
import "moment/min/locales";
const deviceLocale = getDeviceLocale();
moment.locale(deviceLocale); //set your locale (eg: fr)
moment(1316116057189).fromNow(); // il y a 7 ans
Sharing this to those who need it
I have used https://github.com/vuejs-templates/webpack to set up a simple Vue site. This template comes with one single file component (App.vue). I am trying to figure out how would I build a site with multiple single file components?
For example, let's say I have a webpage that has four single file components on it: a table component that can sort and paginate the table data, a filter component that filters the table data, a button component that has a number of buttons like new/edit/delete, and a header component that has a drop down with options that when selected swap out the available filters and the data in the table.
I assume I would create four .vue pages (Table.vue, Filter.vue, Button.vue, and Header.vue) but I'm not really certain how to include them all on the same page. I assume I would use App.vue as the container for the other four single file components, but I'm not sure how to include the other four .vue pages into the App single file component. Should there be references to them in main.js?
Import them into whichever parent component definition you are using them in and register them in the components property of the parent component:
import MyTable from 'path/to/Table'
import MyFilter from 'path/to/Filter'
import MyButton from 'path/to/Button'
import MyHeader from 'path/to/Header'
export default {
components: { MyTable, MyFilter, MyButton, MyHeader },
}
Then, you can use their tags in the parent component's template:
<my-table></my-table>
<my-filter></my-filter>
<my-button></my-button>
<my-header></my-header>
Alternatively, you could register them globally in main.js:
import Table from 'path/to/Table'
Vue.component('my-table', Table);
This way you could use the <my-table> tag in any component without having to register it to that component.
With Java, import is really easy and clear.
You import with the following statement :
import fr.domain.MyUtils;
Then you can use it like this:
MyUtils.myStaticMethod();
You need to namespace MyUtils only if there are two in the same file.
With Typescript AMD and requirejs it seems to be more complicated.
Here the import statement:
import u = require('fr/domain/MyUtils');
And the way to use it:
u.fr.domain.MyUtils.myStaticMethod();
Quite verbose...
The only way I found so fare to use an alias was to double the import statement:
import u = require('fr/domain/MyUtils');
import MyUtils = u.fr.domain.MyUtils;
After doing that you can write this in a module:
MyUtils.myStaticMethod();
It's cleaner but Eclipse TS plugin get completely lost with this and auto completion become erratic. In Visual Studio auto completion is OK but "F12 Go to definition" has to be done twice which is annoying.
Is there a better way to do this ? Or should we just keep namespaces as short as we can ?
You’re doing it wrong.
Your 'fr/domain/MyUtils' module should be exporting only whatever is supposed to be MyUtils. i.e. it should look like this:
export function myStaticMethod() { /* ...code... */ }
It should not be exporting some global namespace object, and it should not be adding anything to some global namespace object that you get from somewhere else. The natural placement of module files in directories is the way you create “namespaces” when you work with external modules.
If you do it correctly then your consumer looks like this:
import MyUtils = require('fr/domain/MyUtils');
MyUtils.myStaticMethod();
or, even more properly using ES module syntax:
import { myStaticMethod } from 'fr/domain/MyUtils';
myStaticMethod();