VueJS - Module not found issue while importing a component - vue.js

I've a fiel name Countries.vue in src/components/Pages/Admin/Countries.vue I want to import it in a file name Add_Doctor.vue in src/components/Pages/Admin/Doctors/Add_Doctor.vue.
I used import Contries from './components/Pages/Admin/Countries'
But i give me an error module not found
how to solve it?

You can import both ways
import Countries from './components/Pages/Admin/Countries.vue'
import Countries from '#/components/Pages/Admin/Countries.vue'

try this
import Contries from '../Countries.vue'
// # is an alias to /src

try below one
import Countries from './components/Pages/Admin/Countries.vue'
I think you are missing Countries.vue in the end

Related

How do I import the QColorConstants namespace in PyQt5?

I fear the answer will be: You can't, but I'm not sure and I don't see a reason for.
Qt QColorConstants namespace.
From the page url I guess this should work:
from PyQt5.QtGui import QColorConstants
but it results in:
cannot import name 'QColorConstants' from 'PyQt5.QtGui'

How do I import a mixin from an embeded folder in components?

This is probably really easy, but i dont know what it's called so i dont know what to google for.
My filestructure is like this:
src
├──components
| └──SomeComponentGroup
| └──Button1.vue
|
|
├──mixins
| └──MyMixin.js
How do i import MyMixin from Button1? import MyMixin from '../mixins/MyMixins.js' doesnt work
Am I missing something? You just need to go one more up like import MyMixin from '../../mixins/MyMixins.js'
Yeah it was really easy. #/mixins/MyMixins.js; was the solution

Vue mutation type intellisense VS Code

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.

Why need default after require() method in Vue?

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.

Typescript, Requirejs, import statement and aliases

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();