Develop Reference

How to import a CSS file in a React Component on Electron

I have seen that it is used
import React from 'react';
import './cssName.css';
but it does not work for me, I am working on the electron app and add react as shown here
https://reactjs.org/docs/add-react-to-a-website.html

It is not working because you do not have a build process set up. You will need to setup webpack or something like that to be able to import css.
I suggest you read this article: https://flaviocopes.com/react-electron/.

How do I add the Buefy global object to Vue 3 CLI

I have been using the Buefy css library with Vue 3 and the CLI framework.
I installed it with npm install and have been using it with no problem.
That is until I wanted to use the dialog.alert feature.
The example on Buefy shown says to use,
this.$Buefy.dialog.alert("My Alert Msg");
This does not work. I don't have this.$Buefy, $Buefy, or Buefy as a defined object.
So I tried to define Buefy as a global object.
The Buefy example shown says to write the following:
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
The example above does not say where to write this, so I tried to write it in my main.js file.
But the code in that file looks like nothing that will work with the suggested code.
The code in main.js is:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/scss/app.scss'
createApp(App).use(router).mount('#app')
There is no 'Vue' to use with Vue.use(Buefy)
App.use does not work either.
I am at a loss as to how to implement a global Buefy object that will allow me to use implement features like the alert dialog.

I seems you are using vue 3 createApp method, with that, you can do this
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/scss/app.scss'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
const app=createApp(App);
app.use(router);
app.use(Buefy);
app.mount('#app')

Organizing all additional plugins/extensions into main.js [VueJs]

Is there any way where I can include all my additional extensions such as (bootstrap.css, vue-moment, vue-axios, bootstrap-vue and etc) into main.js and register it as a global component to be used by all of the other .vue files in my components page?
As I have many pages that might need to use axios and other extensions, I do not want to include this code in every .vue page.
import axios from "axios"
I have tried including all of the imports into main.js and added Vue.use()
However some extensions like moment or axios or datetimepicker will still be required to be included in the component page for it to work properly. Else it will say that it is not defined.
For example.
Components folder - main.vue
import axios from "axios"; <-- (I do not want to include this here)
import moment from "moment"; <-- (I do not want to include this here)
Main.js
//I want all my extensions to be listed here and able to use throughout all of the components pages
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import moment from 'vue-moment'
Vue.use(axios, moment);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Thanks!

Typically you can use the prototype of your Vue instance for JS libraries like moment or axios.
main.js:
import axios from 'axios'
Vue.prototype.$http = axios
Login.vue:
export default {
mounted () {
this.$http.get(...)
}
}
BootstrapVue is providing a very good documentation with explanations on how to register the components and import the styles.
main.js:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
App.vue:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

This article explains it really well
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
For me, I decided to go with this method.
main.js
import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(VueAxios,axios);
filename.vue - this is how I will access it
//By adding "this" in front, it seems to be working fine.
this.axios({...}}

PimCore with VueJS and VueJS-Router

How do i make an extension for Pimcore with VueJs and the VueJS-Router?
So far no problems with vuejs in the frontend … but i cant get the VueJs-Router running.
Does any anyone has an experience with VueJs Routing inside of a pimcore extension?
Thanks

if pimcore has main.js
put the router there
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)

You have to define primcore layout and route properly to make vue-router work.
Define a layout working with vuejs
Define a route /(.*) to a view extended that layout
If you don't define wildcard route to vue layout, then primcore will handle url instead of vue-router. Hopes it helps.
Primcore custom routes documentation:
https://pimcore.com/docs/5.x/Development_Documentation/MVC/Routing_and_URLs/Custom_Routes.html

install vue-router with
npm install vue-router
then use
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
you can see more details about vue-router in officail website: https://router.vuejs.org/installation.html

Compiling and serving React components individually

We are using Laravel Mix to compile react components and serve them individually to the respective pages where they are needed - It's not a SPA.
I'm new to React, so excuse my ignorance. I'm trying to get my head around the current setup and find out if it's the proper way of having multiple components in the same page.
So the boilerplate below has been copied and pasted in every component, only changing the selector, e.g.:
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import ReduxPromise from 'redux-promise'
import App from './containers/App'
import reducers from './reducers'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
applyMiddleware(ReduxPromise),
)
const newstore = createStore(reducers, enhancer)
ReactDOM.render(
<Provider store={newstore}>
<App />
</Provider>, document.querySelector('.component-foo')
)
Some components also differ slightly in how the store is created, e.g. redux devtools is not always present.
So, coming from Vue.js, that doesn't make much sense to me - in Vue.js you'd use a single file to import everything related to the framework and then load each component you need with a single line of code. But this React setup seems to be doing quite the opposite: loading a separate instance of React and Redux for every component in the page, as if I had multiple root/app components in Vue.js.
Is it right to assume React is being bundled and booted multiple times and would that be the proper way to do things?

You're almost certainly doing this wrong. Yes, its very likely you are bundling and booting React multiple times, but no that is not the proper way to do things. It seems you are trying to use the Vue paradigm to do this but with code copied from a React SPA which is why you are building this monstrosity.
May I suggest checking basic react+laravel tutorials before you proceed? simple google search showed this: https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 and I'm sure there are many others.
Since you are new to react, avoid redux for now and just get familiar with putting up react with multiple components. only then add the redux state management IF YOU NEED IT.