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';
Related
I would like to make a js module file that imports vue component and register there.
and then inherit this component and use it for the app's main component.
I've found similar cases but the thing is, I don't use vue cli.
custom.js
import customMain from '/custom/components/main/main.js';
window.Vue.defineComponent('custom-main', customMain);
and in the app.js
import Main from '/global/components/main/main.js';
var App = createApp({
...
components: {
'global-main': Main,
},
template: `<component :is='mainComponent'></component>`,
computed: {
mainComponent() {
if(this.settings.customComponent){
return 'custom-main';
}else{
return 'global-main';
}
}
is this doable? what should I do to make this work?
is there other alternative way to load components dynamically?
The best approach for this case is defining a plugin named registerComponents in the plugins folder : plugins/registerComponents.js
import customMain from '/custom/components/main/main.js';
export default {
install: (app, options) => {
app.component('custom-main', customMain);
}
}
in App.js use the plugin:
import registerComponents from './plugins/registerComponents'
var App = createApp({....})
App.use(registerComponents)
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 '#/...';
I have a question regarding importing an anime.js into my vue project. I am using vue cli. How do I include animejs to my project? I tried it this way:
import anime from 'animejs'
Vue.use(anime);
but I get an error in the console that says:
Uncaught TypeError: a.hasOwnProperty is not a function. . .
can you guys help me?
Vue.use() is used only for plugins designed for Vue.js. You can't simply add a library there, it won't work.
My suggestion is that you create that plugin and use it on your project to make anime.js acessible everywhere.
You could do it like this:
//vue-anime.js
import anime from 'animejs';
const VueAnime = {
install (Vue, options) {
Vue.prototype.$animeJS = anime;
}
}
export default VueAnime
Then later
import VueAnime from './vue-anime';
Vue.use(VueAnime);
Now every Vue component will be able to use anime acessing this.$animeJS.
Or simply -
import Vue from "vue";
import anime from 'animejs/lib/anime.min.js';
Vue.prototype.$anime = anime;
Then this.$anime in all components
#Phiter's answer looked good at first, but I wasn't able to get it to work in my vue-cli 3 environment. The below code worked though, so I think it may work for you. This is just a simple way to install an external library into your Vue app and expose it through a prototype:
// animejs.js
import anime from 'animejs'
const install = (Vue, options) => {
Vue.prototype.$animejs = anime
}
export default install
// Then, in your main.js (at least for me)
import VueAnime from './animejs'
Vue.use(VueAnime)
Now, when you need to access the library, just use this.$animejs in your project.
or simply like this in main.js after npm install:
import anime from 'animejs';
Object.defineProperty(Vue.prototype, '$anime', { value: anime });
then use this.$anime tu use it.
To use AnimeJS globally in Vue 3 project, just create a plugin (plugins/anime.js):
import anime from 'animejs';
export default {
install(app, options) {
app.config.globalProperties.$anime = anime;
},
};
Then include it (main.js or elsewhere):
import VueAnime from './plugins/anime';
createApp(App)
.use(VueAnime)
.mount('#app');
And now, it's accessible everywhere by this.$anime.
Please notice that a minor change from the previous version is installing the plugin for Vue 3.
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 am trying to register a couple of plugins for my app however I am not sure how this should be done.
The plugins that I have, include two ValueConverters and the gooy/aurelia-animator-tinyanimate which I have installed via JSPM.
Here is my current implementation:
resources\index.ts/js
export function configure(aurelia) {
aurelia.globalResources('../from-now', '../date-format');
}
main.ts/js (this is the entry point of the app)
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia): void {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('resources/index', 'gooy/aurelia-animator-tinyanimate');
aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}
The converters are working however I do not see the tinyanimate to be loaded.
Based on the above, I have the following questions:
how would I move the gooy/aurelia-animator-tinyanimate over to the index.js file?
what is the difference between plugin() and feature()?
Features are basically the same as a plugin, except that they live in your own source tree. Based on your index.js file, you would need to load your feature like this:
aurelia.use.feature('resources`);
Assuming that the feature's index.js file is located in the resources folder. You may want to change your index.js file to
export function configure(config) {
config.globalResources('./from-now', './date-format');
}
and update your directory structure to put from-now.js and date-format.js in the resources directory. You don't need to do this, but from an organizational standpoint, it would make sense. Changing the parameter name is simply to better describe what the parameter is (a FrameworkConfiguration instance).
To load gooy/aurelia-animator-tinyanimate in your main.js file, you will need to remove the 'resources/index' parameter from the call to plugin. Aurelia will then load the plugin properly for you. Your main.js file should end up looking like this:
export function configure(aurelia: Aurelia): void {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('resources')
.plugin('gooy/aurelia-animator-tinyanimate');
aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}
Also, note that there is no need for the import {Aurelia} from 'aurelia-framework'; line in your main.ts.