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
Related
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?
npm is great to download some js libraries, but including the into a vue app is really hard. i have no idea if there is an "official" way, but searching online i see so many different approaches.
sometimes it is imported in the app.js file, sometimes in the .vue files inside the tags. i have also seen that there are vue plugins that handle differently. how should i know if i have a vue plugin or not? i don't even know what the other option would be. like a vue module instead of a vue plugin?
is there a way that the vue app just includes/imports the stuff from node_modules so i can use it? so that after doing some npm install it is all available?
Npm just downloads the library into the node_modules folder and let's you access it where you need it.
If it's a vue component you need to import it in a vue file, because that's where you need it.
If it's a vue plugin you have to import it in the main js file because that's where it gets initalized in the whole app.
Looks like you are new to vue, I suggest you to take a look at this simple guide where you can learn some basic stuff.
I am using buefy autocomplete component with nuxt.js. I have imported the CSS file. and the CSS working properly on the localhost but on the live server is not working. I thought the problem may be with buefy but the same problem I am facing with vue-select autocomplete.
Everything is perfect on the local server but when I move my files to live server and do num run build noting works from buefy and vue-select.
Note: the rest of all CSS working just fine
Localhost
Production
And it's not only autocomplete component, none of the buefy components are working, Radio Buttons, Calender etc.
A little guidance will be appreciated.
Thanks
As of today, Buefy has an official support for Nuxt. Instead of importing buefy's css inside nuxt.config.js and creating a new plugin, you can use a nuxt module.
If you create a new Nuxt project using create-nuxt-app, you can choose to add Buefy as your UI framework.
If you have an existing nuxt project, you can simply install the nuxt-buefy module manually:
npm i nuxt-buefy
nuxt.config.js
...,
modules: [
'nuxt-buefy',
],
...
I am new to nuxt. I want to know whether is it possible to use Buefy on nuxt just by using CDN
as I directly imported beufy CDN in script in head function of nuxt.config
But it gave error while using navbar of beufy that the component is not registered correctly.
Nuxt supports buefy by default, when installing using npx create-nuxt-app you'll be asked if you want to use a component framework (buefy is an option here).
If you want to use it in an installed project you can npm install buefy --save and then add "nuxt-buefy" in the modules array of your nuxt.config
I did build some web components with stencil and published them on npm. Now I want to integrate them into another stencil app but I can't find any suggestions how to do so or the suggestions I found so far are not working.
e.g. there is no collections attribute anymore on the stencil config to include external components and this, which I found on the official documentation to distribute the components is not working:
In a stencil-app-starter app
Run npm install my-name --save
Add an import to the npm packages: import my-component;
Then you can use the element anywhere in your template, JSX, html etc.
I know that the components work because I successfully integrated them into an Angular and React App already.
Thanks for your help in advance :)
I had the same problem and just solved it. I'm building a StencilJS app and tried to use my component library #elgervb/stencil-components.
Here is what I did to get it working:
I've added my library with:
yarn add #elgervb/stencil-components
and in tsconfig.json I added typeRoots to the compilerOptions to load my types:
"typeRoots": [
"node_modules/#elgervb"
]
After that I can use all of my components in my app:
<evb-filepicker accept="image/*">
<evb-button>Pick image</evb-button>
</evb-filepicker>
Hope this helps :-)