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.
Related
I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.
I am trying to build a vue library which should be bundled as a umd module so that it can be used via script tag in the browser. The library itself publishes a vue component and is using vuetify but does not ship with vuetify because the consumer bundles should contain it. I am using the webpack configuration externals to prevent that vuetify is part of the final bundle. I have also added vue and other dependencies there. The index.js of my library just looks like this:
import MyComponent from './MyComponent'
export default MyComponent
export {
MyComponent
}
Now I created a vue application where the library itself is loaded by a script tag in the index.html. I registered all vuetify components with Vue.component(name, component) and used Vue.component('MyComponent', MyLibrary.MyComponent) to register my custom component. Unfortunately I am getting lots of errors like Unknown custom element: <VuetifyComponent>. So the problem seems to be that the library looks for vuetify components that exist in the window scope instead of taking those components from my vue application. Is there any way to convince a umd library to take dependencies from the consuming bundle?
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/
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?
I need to import a Vue component asynchronously by the full URL opposed to relative URL. The following example taken from the VueJS documentation works just fine for components within the same project
Vue.component(
'app-component-one',
() => import('./component-from-app-one')
)
However, my goal is to import components from a separate project that's deployed on the same server. I was hoping I could use the full URL and do something like...
Vue.component(
'app-component-two',
() => import ('http://sample-domain.com/project-2/components/component-from-app-two.vue')
)
but it results in and error:
This dependency was not found:
* http://sample-domain.com/app-2/components/component-from-app-two.vue in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/SampleComponent.vue
Is importing components by full URL possible? Thanks in advance!
The example you referenced from the Vue website is leveraging the code-splitting functionality from WebPack, so it will NOT work to load files that are not part of the same project.
What you are trying to do is typically called "dynamic/asynchronous ES6 module loading". Not to get too deep in to it.. but the current import blah from X only support static imports. If you care more about the nitty-gritty details of this.. there is a TC39 proposal for dynamic imports in JS
In the mean time... us mortals have to depend on tools like SystemJS which will do exactly what you are asking for.
But like #divine mentioned... you need some type of build-process that generates the stand-alone Vue component. You can use either WebPack or RollUp to export it as a UMD and the use SystemJS to import that component by referencing the full URL (you could even import it from a different domain! assuming that domain supports CORS)