Recently I migrated my web application to Vue 3 which is implemented with Vue 2 earlier. This app is using as a web component for other websites with different frameworks. In vue 2 once the application is build as web component it is nicely generating the the compressed version of js files and can add to other website direcly. In vue 2 I used below command to build the web component.
vue-cli-service build --target wc --name widget-v2 ./src/components/EntryComponent.vue
It is generating the js files and we can simply import that files to other website and add the web component tag like : <widget-v2></widget-v2> to html and it works.
But once I migrated the app to Vue 3 when I try to build the app as web component it is showing the below error.
I search through internet and found out we have to change the build command like below.
vue-cli-service build --target lib --name widget-v3 src/components/EntryComponent.vue
But the issue is once the js files are generated and when I import the js to other web page and add the tag same as easier it does not work.
I checked the demo.html how the widget added in there. But it is different from earlier than Vue2 version which is added like this. But we can pass props in this method which I tried and generated errors.
My question is how can we add the web component as simply as in Vue 2 when we use Vue 3.
Related
I have a legacy web application which I have introduced Vue into in a few places, via CDN. I have upgraded it from Vue 2 to Vue 3. There is a component used there which breaks with Vue 3, but there is a Vue 3 version of it. However, the author states this: "The component is packaged mainly for use with bundlers, if you require a browser build - post an issue." I do require a browser build. Is there some easy way I can do this for myself? I wasn't planning to use a bundler for this application, so I'm hoping I can use the existing modules to create a .js file I can use from the browser?
I've a vue project created with vue cli 3 and I've installed vue-electron-builder plugin to make electron app with vuejs. Now I've an existing electron app and I want to move the files from the existing electron app to the vue project but I'm confused :(
Build your vue-electron5 project through https://github.com/kdydesign/vue-electron5
Then, insert the file associated with the vue from the renderer path and set it to the electron in the new project with the existing electron settings.
I have an Existing Vue js app which was not built using Vue CLI, Now I want to convert this app to a Vue CLI project how can I achieve it and what changes I have to make to my existing app in order to make it successful
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.
First sorry my english. Im developing a Webapi net core 2 app in the backend and a VueJs app in the front end.
After run npm run build command I can see the vuejs app just created 1 Index.html file and a folder named static with all js, css, vendors inside.
I want to run both project in the same domain:port. I just run dotnet publish -c release and I place in the folder wwwroot the vue app and then modified startup.cs as:
DefaultFilesOptions DefaultFile = new DefaultFilesOptions();
DefaultFile.DefaultFileNames.Clear();
DefaultFile.DefaultFileNames.Add("Index.html");
app.UseDefaultFiles(DefaultFile);
app.UseStaticFiles();
This work perfect when I browse my webapi:5000 it's load automatically the Index.html, but my question is if this is a good practice. I dont care about compile both project and manually copy vue app inside wwwroot before the deploy.
Thanks.
For this I suggest you use this repository: https://github.com/MarkPieszak/aspnetcore-Vue-starter
It implements a webpack middleware with hot reload. When build your net core api it runs a "pipeline" that install dependencies, build your client and copy the static files onto your wwwroot ready to work across your api.