Is it possible to add vuetify to default vuepress theme ?
I just need to add few components to default theme however it would be nice to use the vuetify for handling forms within my components.
I have found a custom vuepress theme which uses a vuetify, however I would prefer to use default vuepress theme.
Another option is to eject the default theme and add the vuetify to it. However I would prefer not to eject the default theme just add vuetify to it.
The previous answer from oscarteg got me most of the way there. Here's what I had to do for the .vuepress/enhanceApp.js file (and yes, if you do not have one go ahead and create it).
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify);
options.vuetify = new Vuetify({})
};
Note that in the new Vuetify({}) passed to options.vuetify you can set your theming.
See https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018
The easiest way would be to use the vuetify CDN. In your config.js add something like
module.exports = {
head: [
['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
]
}
Something like that. See https://vuepress.vuejs.org/config/#head
Another way would be to install the vuetify package and add Vuetify to enhanceApp. It would look like this in your .vuepress/enhanceApp.js
import Vuetify from 'vuetify'
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify)
}
See https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration
Related
I'm working on a browser extension that uses Vue Cli with Vue Bootstrap. I've already optimized my Vue Bootstrap imports to only load the components and icons I use in the project. I also have lazy loaded route components, but I still see a long time to get to the created hook of my first component. Here's a code extract:
Main entry point
console.info("Loaded in " + (new Date().getTime() - global.start) + "ms")
require("#/App.js")
App.js
import Vue from "vue"
import * as Sentry from "#sentry/vue"
import { Integrations } from "#sentry/tracing"
import App from "#/App.vue"
import router from "#/common/router"
import store from "#/common/store"
import { get } from "#/common/api"
...
import {
ModalPlugin,
ButtonPlugin,
TabsPlugin,
DropdownPlugin,
AlertPlugin,
ToastPlugin,
FormInputPlugin,
FormRadioPlugin,
...
BIconArrowRightShort,
BIconArrowDownSquareFill,
} from "bootstrap-vue"
Vue.use(ModalPlugin)
Vue.use(ButtonPlugin)
Vue.use(TabsPlugin)
...
Vue.component("BIcon", BIcon)
Vue.component("BIconX", BIconX)
Vue.component("BIconArrowLeft", BIconArrowLeft)
Vue.component("BIconMailbox", BIconMailbox)
Vue.component("BIconFolderPlus", BIconFolderPlus)
Vue.component("BIconEnvelope", BIconEnvelope)
...
global.vm = new Vue({
router,
store,
render: h => h(App),
created() {
this.$router.push({ name: "Responses" })
...
})
}
And here's my component file that gets loaded first:
<template>
<div>
<div>
...
</div>
</div>
</template>
<script>
let now = new Date().getTime()
console.info("SFC file loaded in " + (now - global.start) + "ms")
import ... from "#/common/components/..."
export default {
...
mounted() {
let now = new Date().getTime()
...
</script>
<style lang="scss">
...
</style>
When I benchmark times, this is what I get:
SFC file loaded at 46ms (at the top of the script section)
Created Hook starts a 177ms
Mounted Hook starts at 308ms
I'm wondering what takes so long in the created hook (I don't do much, just checking the $route parameters). 150ms to just go through the created hook seems like a lot?
Here's the created hook:
console.info("Created Hook in " + (new Date().getTime() - global.start) + "ms")
if (this.$route.params.xx {
this.... = this.$store.state.xxxx.find(e => {
return e.uuid == .......
})
}
Performance loading the extension is important for the user experience, and it always feels a little sluggish when opening the extension popup.
Any idea on what could delay the loading like that?
Thanks!
The first thing that I notice is that you are doing a route.push on App created hook, that means that the router already solve the first route (probably '/') and after that you are adding another route (but not immediately) and then the router is solving that new route.
For a faster boot why don't you add a redirect to the route:
//...routes
{
path: '/',
redirect: {name: 'Responses'}
}
If you have the opportunity to change to Vue3 then maybe you could also perceive a performance boost since Vue2 has an always present GlobalAPI and Vue3 is doing a tree shaking and ignoring the unused stuff after building.
Note: Make sure you are testing it with a production environment, because if you are using the vue-cli to serve the content then the startup will include a lot of overhead
Thanks guys! Actually the default route is already redirecting to Responses, and removing the push doesn't change much.
Unfortunately I can't really migrate to Vue 3 as I rely on dependencies that do not fully support Vue 3 (Vue BS being an important one).
I'm guessing that's as much as I can do at this point. Just wondering if there's any way with Vue Cli to open the window browser extension popup immediately and load Vue afterwards (right now, it's waiting for the whole thing to be loaded and then opens the popup which gives a 300ms delay between the click and the window actually opening).
There is much more what happens between created and mounted hooks - it's not just the code in all created hooks what is running. Check the Vue component lifecycle
As you are using Vue SFC'c and probably Webpack, template compilation is out of the question but still, after created Vue is executing render functions of all components (producing VDOM) and creating real DOM elements based on VDOM (rendering whole app). So depending on number of components and elements, 150ms is not that bad...
Swiper is initializing without problems, for some reason, pagination (and everything else...) is not working.
I'm using webpack on laravel (5.8), the version of swiper i'm using is 6.4.5. No errors in console
This is my code:
// import Swiper JS
import Swiper, { Pagination } from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';
// configure Swiper to use modules
Swiper.use([Pagination]);
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop: true,
autoplay: true,
grabCursor: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
Outcome:
Swiper is created, pagination not working, autoplay not working, nothing is working only the swiper is created
I managed to resolve this issue, I'll post my answer if anyones has the same problem.
The version of swiper i'm currently using contains the vue integration, I'm not using the vue integration because i'm working with the version 2 of vue.js, swiper needs the version 3 of vue.js. So I commended out my vue instance, and everything started working, the issue was a conflict between vue.js and Swiper.
In the documentation you import the same way for vue and ES modules so i'm guessing there is some type of conflict.
So I moved my swiper import after the vue.js declaration:
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
require('./scripts/swiper');
And now everything is working
So, hi. I've been struggling for 4 hours to add at least two different Vue components to my app.js file which is located in js folder along with these vue components in my Laravel project.
I couldn't find any real solution on the internet since it didn't fix my problem.
I have tried something like
Vue.component('signature-element', require('./components/Signature.vue').default);
under the other component which works perfectly, but the problem is I can't make the app work with 2 or more components.
I've tried installing vue-router via npm and configuring a router but it didn't work too, somehow whole JS stopped without any errors in the command log in browser or in Mix.
I've also tried calling the import function instead of the first one I've mentioned, for example:
const componentVar = import ...;
inside vue:
new Vue({
components: { first, componentVar },
mounted() {}
});
But this also did not work unfortunately.
In the second example you're trying to registrate locally your components.
If you want to do this you can do it like this:
import first from './components/first'
import componentVar from './components/componentVar'
new Vue({
el: '#app',
components: {
'first': first,
'componentVar': componentVar
}
})
Instead if you want to use the first example this means you want to register your components globally. That means they can be used in the template of any root Vue instance (new Vue) created after registration
Example:
Vue.component('signature-element', { /* ... */ })
new Vue({ el: '#app' })
Then in your view
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what ReactJS is doing as I was coding in pure JS before using Design Patterns and OOP I consider this a HUGE upgrade for me.
A while ago I started using react-starter-kit from kriasoft.
Also I integrated react-bootstrap to this project to make my life a bit easier.
I followed the tutorial from react-bootstrap and I successfully added Bootstrap.
The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and "power".
The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.
What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?
When using Link component from react-starter-kit a get this kind of error
Warning: validateDOMNesting(...): cannot appear as a descendant of . See Header > NavItem > SafeAnchor > a > ... > Link > a.
Related link for this issue .
(React-Bootstrap link item in a navitem)
The official recommendation from react-bootstrap, and react-router.
(https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)
Also as I said I am a bit new to reactJS and there is the possibility I am missing something.
Would be nice if someone could clarify the difference between Link component from react-starter-kit
and Link from react-router.
Thanks in advance
I start using my own NavItem component instead of original:
import React, { PropTypes } from 'react';
import cx from 'classnames';
import Link from '../Link';
class NavItem extends React.Component {
static propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
active: PropTypes.bool,
disabled: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func,
};
static defaultProps = {
active: false,
disabled: false,
};
render() {
const { className, href, active, disabled, children, onClick } = this.props;
return (
<li role="presentation" className={cx(className, { active, disabled })}>
<Link to={href} onClick={onClick}>
{children}
</Link>
</li>
);
}
}
export default NavItem;
This is the approach I follow for now thanks to this post.
How can I change the NativeScript app theme during the app launch using the nativescript-themes plugin?
JS
import application = require("application");
let themes = require("nativescript-themes");
themes.applyTheme('dark-theme.css');
// TODO: Check if user is logged in
application.start({ moduleName: "views/signin/signin" });
This isn't working, and yes, this is TS but the transpiled JS doesn't work.
Actually the proper code is:
import application = require("application");
let themes = require("nativescript-themes");
application.cssFile = themes.getAppliedTheme('dark-theme.css');
application.start({ moduleName: "views/signin/signin" });
The theming system replaces the currently running "app.css"; so you no longer are using the default "app.css". If you need app.css still; then you just import into your theme.css files using the #import statement.
Please note; the 'dark-theme.css' that you are using in getAppliedTheme('dark-theme.css') is the default theme, if the theme has been changed/chosen by the user in the app and the app is starting up again, then it will use the actual chosen theme, not the default theme. ;-)
You can change the theme using the *
import { Theme } from "#nativescript/theme";
#Component({
selector: 'ns-app',
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit(): void {
Theme.setMode(Theme.Light);
}
}
plugin then make changes in the main app.component.ts file as per the below code.
You can also change the mode by putting conditions in the ngOnInit lifecycle.