Develop Reference

mount any component in vue 3 and laravel-9

i´m trying to mount any component with vue 3, this component it´s a datatables with vue-good-table-next. For fill this tables i´m using axios. but only i can mount one table.
this it´s my app.js
require('./bootstrap');
import { createApp } from "vue";
import VueGoodTablePlugin from 'vue-good-table-next';
import 'vue-good-table-next/dist/vue-good-table-next.css'
import datatablePhysios from "./components/datatablePhysios.vue";
import datatableTreatment from "./components/datatableTreatment.vue";
const app = createApp(datatableTreatment) // here it´s the component
app.use(VueGoodTablePlugin);
app.mount("#app")
i know that in createApp() i have only one component. But also i´m trying this:
require('./bootstrap');
import { createApp } from "vue";
import VueGoodTablePlugin from 'vue-good-table-next';
import 'vue-good-table-next/dist/vue-good-table-next.css'
import datatablePhysios from "./components/datatablePhysios.vue";
import datatableTreatment from "./components/datatableTreatment.vue";
const app = createApp({}) // here it´s the component
app.component('datatable-physios', datatablePhysios)
app.component('datatable-treatment', datatableTreatment);
app.use(VueGoodTablePlugin);
app.mount("#app")
with same result. I don´t know how i can to mount more than one component.
UPDATE (bootstrap.js)
window._ = require('lodash');
try {
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// });
Thanks for read me and sorry for my bad english

TypeError: Cannot read property 'created' of undefined, error 'Vue' is not defined Vue.js 3

i'm trying to use Custom Directives in vue.js 3 from the documentation, and i use the example that in the documentation but i've these errors:
'Vue' is not defined.
and when i remove "vue" from the Directive code these errors show in the console:
Uncaught (in promise) TypeError: Cannot read property 'created' of undefined
Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null
I think these error cuz i use vue version 3 but i'm using Custom Directives that in Vue vesion 3 from documentation
main js:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";
createApp(App).use(store).use(router).mount("#app");
//Directive
const app = vue.createApp({})
app.directive('highlight', {
beforeMount(el, binding) {
el.style.background = binding.value
}
})
component:
<p v-highlight="'yellow'" class="content">{{ limit(content,90, 'more...') }}</p>
Could you help me

There's no object or function called vue in Vue 3 , to register a global directive just you the app instance already defined like :
...
const app=createApp(App)
app.use(store).use(router).mount("#app");
app.directive('highlight', {
beforeMount(el, binding) {
el.style.background = binding.value
}
})

import of a vue.js component

Hello i have a problem for import a component in a exercice on vue.js.
Here is the architecture of my files
I am in the CarPage.vue and i want to import CarList.vue and CarDetails.vue.
Here is the part of code with my import:
<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
i have this error:
Failed to compile.
./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'

Your CarPage.vue is sitting in the same components file. So you need to import as such :
<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>

'TypeError: Cannot read property 'getStateForAction' of undefined ' in react-native

In my react-native project,
i installed follwing
npm install #react-navigation/native #react-navigation/stack
after edit my 'app.js' file like below,
import {createAppContainer, createSwitchNavigator} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import HomeScreen from './screens/HomeScreen'
import LoadingScreen from './screens/LoadingScreen'
import LoginScreen from './screens/LoginScreen'
import RegisterScreen from './screens/RegisterScreen'
const AppStack=createStackNavigator({
Home:HomeScreen
});
const AuthStack=createStackNavigator({
Login:LoginScreen
});
export default createAppContainer((
{
Loading:LoadingScreen,
App:AppStack,
Auth:AuthStack
},
{
initialRouteName:"Loading"
}
));
HomeScreen, LoadingScreen, LoginScreen, RegisterScreen are I created classes extend by 'React.Component'
when i run the project, it gives follwing run time error.
TypeError: Cannot read property 'getStateForAction' of undefined
How I solve this run time error?

You are trying to use the stacks directly inside the container,You can use a single stack or use the switch navigator that you have imported like below
const switchNav=createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
export default createAppContainer(switchNav);

React Native jest test: TypeError: Cannot read property 'unsubscribeFromTopic' of undefined

I'm using react-native-fcm and jest to test my React Native app. I have a pretty basic test, it looks like this:
import 'react-native';
import React from 'react';
import PushController from '../app/PushController';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('works correctly', () => {
const tree = renderer.create(
<PushController />
);
});
And PushController is somewhat large, so here's the interesting parts
import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import FCM from 'react-native-fcm';
export default class PushController extends Component {
(...)
componentDidMount() {
if (this.notificationListener) this.notificationListener.remove();
this.notificationListener = FCM.on('notification', (notif) => {
if (!notif.local_notification) {
this.notifyUser(notif.coffee);
}
});
FCM.unsubscribeFromTopic('/topics/coffee');
FCM.subscribeToTopic('/topics/coffee');
}
(...)
However, when running the test I get
__tests__/PushControllerTest.js
● works correctly
TypeError: Cannot read property 'unsubscribeFromTopic' of undefined
at Object.FCM.unsubscribeFromTopic (node_modules/react-native-fcm/index.js:86:15)
at PushController.componentDidMount (app/PushController.js:44:26)
at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
at ReactTestReconcileTransaction.ON_DOM_READY_QUEUEING.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
at ReactTestReconcileTransaction.TransactionImpl.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
at ReactTestReconcileTransaction.TransactionImpl.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
I've tried including lots of stuff in the test, like jest.mock('react-native-fcm') and others, but I can't get it to work at all. I get that jest automatically mocks the library, but I don't understand why FCM is undefined. Any ideas?

I managed to solve it, finally! Simply needed to change my test to
import 'react-native';
import React from 'react';
import PushController from '../app/PushController';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
import FCM from 'react-native-fcm'; // <-- This
it('works correctly', () => {
FCM.unsubscribeFromTopic = jest.fn(); // <-- These two
FCM.subscribeToTopic = jest.fn();
const tree = renderer.create(
<PushController />
);
});
To make sure the actual calls are mocked. I did a lot of googling before this, so I'm sure this will be useful for someone.