I recently used npm to install BootstrapVue with:
npm install vue bootstrap-vue bootstrap
I then included BootstrapVue into the root of my project like so:
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Finally, this is the template I am using to test the BootstrapVue component:
<template>
<div>
<search-bar />
<div v-for="post in posts" :key="post.id">
<post :postData="post" />
</div>
<b-button pill >TEST</b-button>
</div>
</template>
When I go to check the web page, the button appears, but it renders with no styling. The strange thing is that when I check the Vue dev tools extension, the BButton component is recognized and contains all the styling properties included (in this case, just the "pill" option set to true). I even inspect the button element on the DOM and it contains the classes that were passed down from BootstrapVue, but none of those styles were rendered. What am I missing here?
Also, just for good measure, I looked in the package.json file to make sure Bootstrap and BootstrapVue were installed and were up to date. They are.
in your root of your project(app.js), you will need to add 2 more lines
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
To import the css files
Related
I have obviously a misconception of how the vue3 "In-DOM Root Component Template"-mechanism is working. Any hints appreciated!
I modified an example vite project to use "In-DOM Root Component Template".
index.html
<body>
<div id="app">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
</div>
<hello-world msg="Vite + Vue"></hello-world>
</div>
<script type="module" src="/src/main.js"></script>
</body>
main.js
import { createApp } from 'vue'
import './style.css'
import HelloWorld from './components/HelloWorld.vue'
const app = createApp({})
app.component('HelloWorld',HelloWorld)
app.mount('#app')
HelloWorld is the default example component, installed by vite install.
Result: The rendered output is empty, the div#app-innerHtml is not used as Template as expected.
I had an js error here const app = createApp()
Error: Cannot read properties of undefined (reading 'render').
Vue Options should not be undefined. Please replace it with:
const app = createApp({})
You register you component in PascalCase as HelloWorld and use it the same way in HTML. But you should use kebab-case <hello-world>.
There is an explanation in the Vue Docs Using a Component about this:
If you are authoring your templates directly in a DOM (e.g. as the
content of a native element), the template will be subject
to the browser's native HTML parsing behavior. In such cases, you will
need to use kebab-case and explicit closing tags for components
Please pay attention to the explicit closing tags also.
The app works When you fix both problems. Here is the working playground
https://stackblitz.com/edit/vue-n2v2y4?file=public/index.html
I'm trying to integrate tinymce in my vue app. I don't want to use the cloud version and I've installed it inside my app suing this commend npm i tinymce.
After the setup into my component I've imported the needed files in this way and I created a textarea into the template
<template>
<Navbar></Navbar>
<div class="container" id="editorWrapper">
<div class="row mt-5 pt-5 m-0">
<!-- -->
<div class="col-sm-12 col-md-12 col-lg-12 p-0" id="">
<h1>Write post</h1>
</div>
<!-- -->
<div class="col-sm-12 col-md-12 col-lg-12 p-0" id="programEditorWrapper">
<textarea ref="programEditor" id="programEditor"></textarea>
</div>
</div>
</div>
</template>
<script>
import tinymce from 'tinymce'
import 'tinymce/themes/silver'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/code'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/table'
import contentUiCss from 'tinymce/skins/ui/oxide/content.css'
import contentCss from 'tinymce/skins/content/default/content.css'
export default {
name: 'ProgramsEditor',
components: {
Navbar
},
data() {
return {
editor: null
}
},
created() {
},
mounted() {
this.initEditor()
},
methods: {
initEditor() {
this.editor = tinymce.init({
selector: '#programEditor',
plugins: 'advlist code emoticons link lists table',
toolbar: 'bold italic | bullist numlist | link emoticons',
skin: false,
content_css: false,
content_style: contentUiCss.toString() + '\n' + contentCss.toString()
})
},
}
}
</script>
Unfortunately I'm not able to see the editor and I get two errors
How I can fix this problem and let the editor work?
Based on the error message and the code snippet provided, you've missed importing some critical files that TinyMCE uses, as such its trying to load the external JS files which don't appear to exist or are being served as HTML files (potentially a 404 page).
I'd suggest reviewing the TinyMCE bundling docs further, which hold the answer here: https://www.tiny.cloud/docs/tinymce/6/introduction-to-bundling-tinymce/. So in this case, to solve the 2 errors you're getting that should be able to be resolved by importing the model and default icon pack alongside the theme:
import tinymce from 'tinymce'
import 'tinymce/icons/default';
import 'tinymce/themes/silver';
import 'tinymce/models/dom';
Basically, TinyMCE at the very minimum needs the core, theme, skin, default icon pack and model to be able to operate (Note: the model is new in TinyMCE 6 and wasn't needed before that). If any of those are missed then it will fail to initialize.
Additionally, you could use the official Vue integration guide.
After installation.
Simple input the core packages:
You need both the core tinymce package and tinymce-vue installed.
import "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/skins/ui/oxide/skin.css";
import <Your component name here> from "#tinymce/tinymce-vue";
And use it as a normal Vue component.
I made brand new app in vue and I want to add vuetify in the app as a framework. By running npm install vuetify --save this command it will add in the app but When I want to use it then there is no showing css button color while running the app.
The App.vue and the main.js files are :-
App.vue:-
<template>
<div id="app">
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
<v-btn color="warning">Warning</v-btn>
<v-btn color="info">Info</v-btn>
</div>
</template>
<script>
export default {
}
</script>
Main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
new Vue({
el: '#app',
render: h => h(App)
})
How can I run my app with CSS button coloring?
If you are using vue-cli 3 you can just run this command; vue add vuetify
If you want to add it manually look at the documentation here:
Here you have an example, remember to add css-loader in webpack.
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
new Vue({
el: '#app',
render: h => h(App)
})
EDIT:
You should not change the question like that, think about that next time it will just confuse other people looking for help or trying to help you :)
About your new question, your template is wrong. You are missing <v-app>
<v-app>
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
<v-btn color="warning">Warning</v-btn>
<v-btn color="info">Info</v-btn>
<v-app>
Check out the red banner in the documentation here:
With Vue CLI 3, you can simply add it as you add any other package: vue add vuetify.
Now if you run git diff, you will see that everything is done for you behind the scenes:
You can see the modified files by the end of the installation process:
In the past, we were used to do that manually, and it was not always evident. This is a major improvement in Vue CLI 3.
I am trying to build a layout using single-file components in Vue.js, with dynamic population and URLs using Vue-router. (I'm using the webpack template via vue-cli as well.)
It works as expected for my app.vue file-- containing the nav, sidebar, page head, and <router-view>-- and the <router-view> content appeared as expected when the correct <router-link> is clicked... until I tried to add subcomponents to the add-load component being called to the <router-view>. Now, nothing appears at all, despite not throwing any errors.
Admittedly, I am not basing my structure on any examples, as I couldn't really find any doing it the way I was hoping to. I wanted to use nested components by calling them like custom elements-- I think this makes the code much easier to read and maintain. I'm not entirely sure how to structure it otherwise, to be honest. Using multiple <router-view>s as siblings to each other seems counterintuitive to me.
I've tried a variety of combinations of how and where to import and call the components, and nothing has worked. The only way I can get any content to load is if I only call a single component for path: '/add-load'. Is it just impossible to use multiple components outside of your base app.vue? I find that hard to believe. Here's what I started with.
From my index.js:
import AddLoad from '#/components/AddLoad'
import AddLoad from '#/components/ProgressSteps'
import Stops from '#/components/Stops'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
},
{
path: '/add-load',
components: {
AddLoad,
ProgressSteps}
}
]
})
From my App.vue file (the multiple component behavior that I'd like to mimic is shown here):
<template>
<div id="app">
<div class="wrapper">
<Sidebar/>
<div class="container-fluid">
<TopNav/>
<MobNav/>
<div class="container-fluid">
<PageHead/>
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar'
import TopNav from '#/components/TopNav'
import MobNav from '#/components/MobNav'
import PageHead from '#/components/PageHead'
export default {
name: 'App',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
}
</script>
From my AddLoad.vue file:
<template>
<div class="add-load">
<div class="content-container container-slim">
<progress-steps/>
<router-link to="#stops">Stops</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import ProgressSteps from '#/components/ProgressSteps'
export default {
name: 'AddLoad',
component: ProgressSteps
}
</script>
Here is a link to a codesandbox, so you can see the full functionality. https://codesandbox.io/s/7k520xk0yq
I am using vuejs with vuetify, I put a Basic vuetify template and tried to Change the Color theme but the Color will not Switch. I do not get any Errors in my console and my Cache is cleared aswell.
The main.js Code:
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base, // #E53935
secondary: colors.indigo.base, // #FFCDD2
accent: colors.indigo.base // #3F51B5
}
});
const app = new Vue({
el: '#app',
// ...
});
And this is how my template Looks like.
<div id="app">
<v-app light>
<v-navigation-drawer
fixed
v-model="drawerRight"
right
clipped
app
>
</v-navigation-drawer>
<v-toolbar
dark
fixed
app
clipped-right
>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-spacer></v-spacer>
<v-toolbar-side-icon #click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
in my case i had to wrap all my components in v-app
<div id="id">
<v-app>
// youre code here
</v-app>
</div>
if you dont do this youre app use default theme.
reference from vuetify docs:
"In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be used within your application ONCE."
the Color will not Switch
The colour of what? You don't have any components that use theme colours there. If you want to change the background colour of the toolbar for example you have to do <v-toolbar color="primary">
#DigitalDrifter suggested #import '~vuetify/src/stylus/main'.
However, that's stylus code.
So you can create for example stylus folder and put main.styl in that folder, which is suggested so you can alter the default style easily.
Add that code to main.styl:
// main.styl
#import '~vuetify/src/stylus/main'
Then include main.styl in your app.js
// app.js
import './stylus/main.styl'
If you later want to override Vuetify default stylus variables inside (do it in main.styl), then your variables must be declared before the #import and then they will automatically override the Vuetify default variables.