Is it possible in react native to create an index file from which you can refer to for imports rather than doing '../../folder/component'?
I have tried a few different methods, including the following:
components folder
-> chat
-> Chat.js
-> dashboard
-> Dashboard.js
-> home
-> Home.js
-> index.js
index.js
import Home from './home/Home'
import Dashboard from './dashboard/Dashboard'
import Chat from './chat/Chat'
module.exports = {
Home,
Dashboard,
Chat,
}
Then inside a component, lets say Dashboard,
import { Home, Chat } from '../components'
Another method:
index.js
export Home from './home/Home'
export Dashboard from './dashboard/Dashboard'
export Chat from './chat/Chat'
I also tried surrounding the export with curlies, ex export { Home } from './home/Home' because the compiler threw an error otherwise, but it still did not work this way.
I also tried the method inside this users question Requiring Modules in react-native
Is this functionality possible in react-native?
Yes, it is possible. Do the following.
Do named exports from Component files.
from Home.js
export { Home };
from Chat.js
export { Chat };
from Dashboard.js
export { Dashboard };
where Home, Chat and Dashboard are the components names in the respective files.
Now in your index.js Do following:
export * from './home/Home';
export * from './chat/Chat';
export * from './dashboard/Dashboard';
use them in other files like this:
import { Home, Chat, Dashboard } from '../components'
Update 1
If you are using redux and want to export the component which is connected to the store, then use the following:
Store the connected component in a const variable like this:
const HomeComponent = connect(mapStateToProps, mapDispatchToProps)(Home)
then export it like this:
export { HomeComponent }
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)
I would like to integrate intertiaJS into my Quasar app so that I can communicate with my Laravel backend. My problem now is that the general stuff is taken over by the Quasar CLI, which is good in principle, but in this case it takes away my entry point as described at https://inertiajs.com/client-side-setup:
import { createApp, h } from 'vue'
import { App, plugin } from '#inertiajs/inertia-vue3'
const el = document.getElementById('app')
createApp({
render: () => h(App, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
})
}).use(plugin).mount(el)
My thought is that I could use a boot file like the offered in Quasar (https://quasar.dev/quasar-cli/boot-files), but I have to admit that I don't have the right approach.
When I look at the app.js that is automatically generated, I see that nothing special happens in the rendering:
/**
* THIS FILE IS GENERATED AUTOMATICALLY.
* DO NOT EDIT.
*
* You are probably looking on adding startup/initialization code.
* Use "quasar new boot <name>" and add it there.
* One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
* boot: ['file', ...] // do not add ".js" extension to it.
*
* Boot files are your "main.js"
**/
import Vue from 'vue'
import './import-quasar.js'
import App from 'app/src/App.vue'
import createStore from 'app/src/store/index'
import createRouter from 'app/src/router/index'
export default async function () {
// create store and router instances
const store = typeof createStore === 'function'
? await createStore({Vue})
: createStore
const router = typeof createRouter === 'function'
? await createRouter({Vue, store})
: createRouter
// make router instance available in store
store.$router = router
// Create the app instantiation Object.
// Here we inject the router, store to all child components,
// making them available everywhere as `this.$router` and `this.$store`.
const app = {
router,
store,
render: h => h(App)
}
app.el = '#q-app'
// expose the app, the router and the store.
// note we are not mounting the app here, since bootstrapping will be
// different depending on whether we are in a browser or on the server.
return {
app,
store,
router
}
}
I.e. in principle I should be able to link in without it causing any conflict situations. The question is, how would that look?
I have to link into the rendering afterwards and overwrite it as described in the code example. I would like to stay with the Quasar Cli, because it is very useful and the situation described here is the only exception.
p7
the boot files is the right place to inject and initialize your own dependencies or just configure some startup code for your application.
I have not had the opportunity to use the library you mention, but I detail a little how you could implement
create your boot file
import { plugin } from '#inertiajs/inertia-vue';
export default async({ app, Vue }) => {
Vue.use(plugin);
}
until there you have 50%. On the other hand, you cannot do a mixin to the main instance but you could do it for each page, however I recommend that you make a component part to which you add the data you need and make a mixin of the library you need
<template>
<div />
</template>
<script>
import { App } from '#inertiajs/inertia-vue';
export default {
mixins: [App],
props: ['initialPage', 'resolveComponent'],
}
</script>
In order to do this, modify according to how the library you use works.
i'm trying to export a Vue.js 2 project as a library containing multiple components.
Using this as example I managed to export a single component.
In my "library" project, I've exported in the main.js:
import TestButton from "#/components/TestButton";
import store from "#/store";
export default {
install(Vue, options) {
if (!options || !options.store) {
throw new Error("Please initialise plugin with a Vuex store.");
}
options.store.registerModule("testLibrary", store);
Vue.component("test-button", TestButton);
}
};
I build it via vue-cli-service build --target lib --name testlib src/main.js
Published on npm via npm publish --access-public
And then imported in another Vue 2 project.
Here in the main.js I've:
[...]
new Vue({
store,
render: (h) => h(App),
}).$mount("#app");
import TestButton from "my-test-library";
Vue.use(TestButton, { store });
And then I can successfully use <test-button></test-button> in whatever component I need, while the Vuex Store has a working "testLibrary" module.
Now the question is how I can export multiple components in the first app and import in the second one.
I've found many example about, such as this one, however I can't get it working.
For example, in the library app I'm trying
import TestButton from "#/components/TestButton";
import AnotherComponent "#/components/AnotherComponent";
import store from "#/store";
export default {
install(Vue, options) {
if (!options || !options.store) {
throw new Error("Please initialise plugin with a Vuex store.");
}
options.store.registerModule("testLibrary", store);
Vue.component("test-button", TestButton);
Vue.component("another-component", AnotherComponent);
}
};
While in the second app I'm trying something like
[...]
import { TestButton, AnotherComponent } from "my-test-library";
But whatever syntax I try it seems like the second app goes in a loop while building and don't work.
Any idea how is this done?
I want to create a bottom tab navigator and am importing 3 classes. But it doesn't work. The app doesn't throw any errors, but fails to open. It works fine if all classes are in the same file. But I really need to import as the classes are massive. Each individual class is working perfectly.
My code:
import React, {Component} from 'react'
import {createBottomTabNavigator,createAppContainer} from 'react-navigation'
import FriendScreen from './screens/FriendScreen'
import InstructionsScreen from './screens/InstructionsScreen'
import ItemsScreen from './screens/ItemsScreen'
const TabNavigator=createBottomTabNavigator({Game:FriendScreen,Instructions:InstructionsScreen,Items:ItemsScreen},{initialRouteName:"Game"})
export default createAppContainer(TabNavigator)
I've read a number of code segments on the internet, but can't locate the error
The error is that you didn't follow the normal structure defined by react-navigation.
When defining a screen it should be like:
RouteName:{
screen:Component.
}
You TabNavigator should be:
const TabNavigator=createBottomTabNavigator({
Game: {
screen : FriendScreen
},
Instructions: {
screen : InstructionsScreen
},
Items:{
screen : ItemsScreen
}
},
{
initialRouteName:"Game"
})
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