Develop Reference

I cannot include Buefy in Vue3

someone knows how can I include Buefy in Vue3, becuause I am doing this (main.js) but I get an error:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
createApp(App)
.use(store)
.use(router)
.use(Buefy)
.mount("#app");
And the error is:
Uncaught TypeError: Vue.prototype is undefined

Buefy support for Vue3 is still in the planning phase. I think that its going to a while.
https://github.com/buefy/buefy/issues/2505
As of 7 Dec 2020:
https://github.com/buefy/buefy/issues/2505#issuecomment-739899697
Btw there is a new branch and I'll try to migrate other components to show you my main idea:
Typescript
Options API
In my opinion the problem is not migrate all to Vue 3 but maintain two versions.
Vue 3 is the future but official and not official libraries and frameworks (for example Nuxt) are not ready so I don't understand the really need at the moment.

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({...}}

Implementing Socket.IO in VueJS CLI app with custom files

Ok so in the following link, you'll find ccc-streamer-utilities.js and a folder called streamer with a stream.js file in it.
Here's the link
stream.js manages websocket connections and ccc-streamer-utilites.js decorates the output and provides helper functions.
What I need to do is include the following files and utilise them within a Vue CLI app. However, I am having a lot of difficulty attempting to do this. After trying for a week and asking on reddit, here I am.
This is what the main.js file looks like. Please point me in the right direction if helping isn't something you're inclined to do.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import VueSocketIO from 'vue-socket.io' //VueJS socket component
import io from 'socket.io-client' //Socket import
Vue.use(Vuetify, VueSocketIO, socket)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
The component would look like this
<template>
<div id="app">
<div> ... (socket output is determined by element classes and divs [check the two files for more information on this] so ideally, I'd have an implementation that allows me to just input the right class and id's to get the result i want) </div>
</div>
</template>
.....
Here's an implementation of the client without using VueJS that I did a few months ago while prototyping.
Thank you so much for taking the time to actually help me here since I know I'm asking for a lot.
My question: How do I implement the utility that stream.js and ccc-streamer-utilities.js provide inside a Single File Component in VueJS?

Async / Lazy Load Vue components with browserify

I am trying to load a number of Vue.js components into my app.js file (using browserify/vueify via elixir) in a laravel project.
Instead of loading every component at once, I'd like to lazy load the individual vue components when they are needed using vue router.
Where do I set up the partition bundle json file and how should it be structured?
At the moment, Ive tied out the following an my main app.js file:
import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';
// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';
Vue.use(Resource);
Vue.use(VueRouter);
var router = new VueRouter();
router.map({
'/async': {
component: function (resolve) {
loadjs(['./components/Users.vue'], resolve)
}
}
})
Here's where I am stuck:
How do we lazy load all .vue components listed above in the router.map function?
How to set up the partition table json file for the above, and where should it be saved?

From the documentation https://v2.vuejs.org/v2/guide/components.html#Async-Components
If you’re a Browserify user that would like to use async components, its creator has unfortunately made it clear that async loading “is not something that Browserify will ever support.” Officially, at least. The Browserify community has found some workarounds, which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.