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?
Related
When trying to import 'Vue' in my ViteJS project in order to instantiate a new Vue() instance, for both
import vue from 'vue'1
and
import vue from '#vitejs/plugin-vue'2
I get the following errors:
"The requested module '/node_modules/.vite/vue.js?v=8f63bc36' does not provide an export named 'default'"1
"Invalid left-hand side in assignment"2
Has anyone faced a similar problem or found a solution to this? Thanks in advance!
**for the ones wondering what I am trying to do, I want to get the HTML content of the 'template' section of a Vue component as a string
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.
I created an api. And for him, I created a one-page interface using vuecli. My plans are to embed it in the projects I need. The question is what needs to be done to export the written application and reuse it where necessary?
The structure of the project is shown in the screenshot.
src/main.js - connect and configure axios
src/App.vue - I describe the main component of the application
(maybe I need to put it in a separate component in the components
folder)
src/components/OneDay.vue is the second component that is mainly
called src/App.vue several times.
src/mixins/dateHandler.js - several functions common to the two
components, which are connected as mixins.
I have not modified any other files. How can I prepare this correctly so that I can connect these components to my other applications using composer? I connect, configure some variables (api address, for example) and display it in the right place on the page - this is how I see it.
You can try to create a web component using VUE CLI 3 to use it later in a different code base. Just make sure your main.js file looks like this
import Vue from 'vue';
import wrap from '#vue/web-component-wrapper';
import VueWebComponent from './components/VueWebComponent';
const CustomElement = wrap(Vue, VueWebComponent);
window.customElements.define('my-custom-element', CustomElement);
and build it using vue-cli-service build with --target wc
You can read more precise instructions there:
https://github.com/vuejs/vue-web-component-wrapper
https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/
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.
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.