https://imgur.com/quHp4ym
This is my Folder structure.
I want to call Login Component from AppHeader Component. What will be the folder structure during calling.
My try:
Not working.
<script>
import Login from '../components/auth/Login.vue'
export default
{
}
</script>
You should accomplish it with
import Login from '../../auth/Login'
Use # prefix to point to root folder of project then you can go anywhere
import Login from '#/...';
Related
Can i use multiple vue composables in one file?
example:
<script>
export function arrayToInt(arr) {
...
}
export function arrayToUint(arr) {
...
}
</script>
then somewhere else:
import {arrayToInt, arrayToUint} from "./useBytesHelper"
because im getting a vue router parsing error right at the beggining when loading my app. and i might be doing this wrong
Considering that the file is JavaScript module (useBytesHelper.js) and not Vue SFC (useBytesHelper.vue), it's incorrect to use <script> tag there.
The rest is correct, it should be used as listed:
import {arrayToInt, arrayToUint} from "./useBytesHelper"
i have a Login module which contains login.html.
i want login to be the default module and login.html as the default opening page.
in main.ts file you will have something like this
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
replace this with
import { LoginModule } from './login.module';
platformBrowserDynamic().bootstrapModule(LoginModule);
I have below folders
src
-common
-> test.js
-views
->test
-1.vue
I need to call common folder in 1.vue.
I have tried below script, but its not working.
import { common } from '../common'
Is there any suggestion on how can I call common folder from 1.vue?
If test.js is a default export then:
import Test from '../../common/test';
If it's a named export then:
import { Test } from '../../common/test';
I have an index.js file in my Vue project's components folder which allows me to import components like this:
import { home, search, tour } from '#/components';
The index.js file:
export { default as home } from './home/home.vue';
export { default as search } from './search/search.vue';
export { default as tour } from './tour/tour.vue';
export { default as tourItem } from './tour-item/tour-item.vue';
Now, when doing this with nested components (a component that should be used in another) it gives me the unknown custom element error.
I don't get why that error is thrown - it's just another component, right?
To be more clear, this works:
import tourItem from '#/components/tour-item/tour-item.vue';
And this doesn't:
import { tourItem } from '#/components';
I had the same issue. Try export children/local component just BEFORE parent in index.js. This solve problem in my case.
Solution in Vue forum
I'm trying to navigate programmatically in action creator after calling an API and receiving a response.
What I did:
I created a file utils/History.js with this code:
import createBrowserHistory from 'history/createBrowserHistory';
export default createBrowserHistory();
and then used it in action creator:
import History from '../../utils/History';
//some code
History.replace('/sign-in');
Of course, I let relevant component know about this routing. If I use <NavLink to='/sign-in'>, it works. But if I want to render this component on History.replace('/sign-in') or History.push('/sign-in'), I can see just 'localhost:8080/sign-in' in address bar, but relevant component doesn't appear.
Please help me to figure out.
The simplest way would be to create a history.js file:
import createHistory from 'history/createBrowserHistory';
export default createHistory();
And then, in your action.js (or actions/index.js, whatever you prefer):
import history from './history';
history.push('/your_route');