I'm creating a Vue-app that runs in the browser, but that can also be packed into a Capacitor app. I use Vite as bundler.
I use the #capacitor/camera plugin, which needs the following import in a component that uses the camera:
import { Camera, CameraResultType } from '#capacitor/camera';
The project is a Quasar framework app, which uses a separate src-capacitor folder for the Capacitor setup. Since the camera plugin is only installed in src-capacitor (not in package.json in the root of the project), this gives an error when running the app in a browser.
Is there any way to make the import conditional?
Related
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.
I'm working on an online-based IDE-like code sandbox. I found browserFS like a library to store files locally but now I want to compile the Vue project to render it on the browser. How to do it with babel standalone inside the browser itself instead of requesting a server? or are there any other solutions?
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 am using Electron-vue to create desktop application. I was trying to use boostrap-vue in my app. When I open the app I can see all the functionality of boostrap(button tables) but none of the styling associated with it (color, font etc..)
Am I doing something wrong or is bootstrap vue not compatible with electron style apps ?
The right installation procedure is described into the documentation: https://bootstrap-vue.org/docs
Into your project root folder, install prerequesites:
# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap
After that, you have to open the main.js file ant had this portion of code just before the "new Vue(...)" call:
// Activate bootstrap vue
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
A blog post describe it perfectly: https://www.digitalocean.com/community/tutorials/vuejs-using-bootstrap4
BootstrapVue does support beig run under Electron.
See https://github.com/loopmode/electron-webpack-quick-start/tree/bootstrap-vue-ts and https://github.com/electron-userland/electron-webpack/issues/302#issuecomment-508911966
I was reading some blogs and apparently boostrap-vue does not work with desktop apps. I had more luck with using element UI
I am new to application development with React-native. While creating project with the command react-native init appname the index.js file is also created inside the project folder. Today, I have learned that there is a better way than installing android emulator to test react-native projects which is Expo. To create expo projects I need to create react-native project with create-react-native-app appname command. However, the index.js file is not created while creating project with this way. Even though, I manually created the index.js file, it does not work as it should.
One more question: What is aim of App.js and index.js?
React Native: (react-native init)
A little bit of history. In earlier versions of React Native, separate index.js files were required for iOS and Android. App.js was meant to contain the top level cross platform code for your app. Then index.ios.js and index.android.js would import the cross platform code from App.js and register/link it with the underlying native modules. That allowed you to place top-level cross platform code in one file while placing top-level platform specific code in other files. The index.*.js files were the connectors that wired up the Javascript to native Android or iOS code.
As React Native evolved to remove the platform specific index files, they kept the paradigm of having the top-level Javascript in App.js and using index.js to wire that code to the native modules.
Bottom Line
As a practical matter, don't touch index.js. Make your top-level modifications in App.js.
Expo: (create-react-native-app)
Expo operates a little differently than baseline React Native. You will notice that an Expo project does not contain the ios or android directories. That is because there is no native code associated with an Expo project. All of the native code is contained in the Expo SDK. Since there is no native code to wire up to your Javascript, you do not need an index.js file.
Bottom Line
You should not need an index.js file in an Expo project. If your Expo project is not working, there is likely another problem that needs to be resolved.