When adding base/global styles in Vue, is it best practice to require them in my main.js?
import Vue from 'vue';
import App from './App.vue';
import store from './store/';
require('./assets/scss/main.scss');
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app')
Or is it better to import them in my App.vue?
<style lang="scss">
#import 'src/assets/scss/main.scss';
</style>
There's no difference importing in App.vue or in main.js, just do not forget that the style tag in App.vue must not have the attribute scoped or the import will not work, I personally prefer to do inside the main.js, but with vue-cli 3 IMHO this approach is much better:
vue.config.js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/variables.scss";`
}
}
}
}
PS: Do not forget that in vue, when importing modules, you can use the alias # that maps into the /src folder of files.
In a project of mine I have this import in main.js
import '#/assets/scss/index.scss';
For more information: https://cli.vuejs.org/guide/css.html
Related
I want to be able to use the AOS library globally on my vue project.
This is for Vue 2.
new Vue({
created () {
AOS.init()
},
render: h => h(App),
}).$mount('#app');
The Vue 3 sets up the app a little bit different.
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
I dont have that created option with the Vue 3 setup. I tried this, but it´s more of a guessing game...
createApp({App, AOS.init()})
But do I make this work in Vue 3?
You can still do that in Vue 3. Note h() is now imported as a global function from vue instead of being an argument of render().
Here's the equivalent Vue 3 code:
import { createApp, h } from 'vue'
import App from './App.vue'
createApp({
created() {
AOS.init()
},
render: () => h(App),
}).mount('#app')
You could use the created hook of the root component. To me that has always seemed like an appropriate place to initialize application-wide libraries.
I'm trying to change the 'primary', 'danger', 'info', etc theme colors in my project. I use bootstrap-vue. I've tried changing the variables.sass file in the bootstrap folder in node_modules but nothing is reflected. I took a look at the documentation for theming but I can't seem to make sense of it, or get an idea of what I should be doing. Their example looks nothing like the scaffolded project for CLI 4. Should I be creating a custom sass file, installing a sass loader, and importing it?
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './assets/main.css';
import routes from './routes';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(BootstrapVue);
const router = new VueRouter({mode: 'history',routes});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
#import 'assets/main.css';
#import 'assets/custom_scss.scss';
</style>
If you've created your project with vue-cli 3/4 you can do the following.
Create a custom.scss file and import the bootstrap and bootstrap-vue stylings in there, and customize the variables before the import.
Then import custom.scss in your main.js file along with bootstrap-vue
custom.scss
$theme-colors: (
"primary": black,
"danger": blue
);
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
main.js
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "../assets/scss/custom.scss";
Vue.use(BootstrapVue);
new Vue({
render: h => h(App)
}).$mount("#app");
Another note is that you should never customize any code inside node_modules as these files should be able to be deleted and re downloaded again without breaking anything.
I using vuetify : https://vuetifyjs.com/en/
I want to use moment.js. So I read this reference : https://www.npmjs.com/package/vue-moment
I had run npm install vue-moment
I'm still confused to put this script Vue.use(require('vue-moment'));
In the vuetify, there exist two file : main.js and index.js
main.js like this :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
index.js like this :
import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store({
modules: {
dataStore
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
where do i put Vue.use(require('vue-moment'));?
I try to put it in the main.js, but if i call my vue component, there exist error : ReferenceError: moment is not defined
My vue component like this :
<template>
...
</template>
<script>
export default {
mounted() {
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
};
</script>
I found this at the bottom of the vue-moment npm page
vue-moment attaches the momentjs instance to your Vue app as
this.$moment.
This allows you to call the static methods momentjs provides.
So you should be able to use your original configuration of vue-moment and do this in your mounted() method
mounted() {
let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
notice this.$moment
And for the set up of vue-moment you should place this in your main.js file
main.js
Vue.use(require('vue-moment'))
=========================================================================
GLOBAL
If you want to use moment with Vue globally you can create an Instance Proprety
main.js
import moment from 'moment'
Vue.prototype.moment = moment
In your component you then call this.moment in your methods or computed properties. In your mounted section it would look like this
mounted() {
let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
COMPONENT
If you just want to use moment in a component you can include directly like this
<script>
import moment from 'moment'
export default {
mounted(){
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
}
</script>
I'm trying to set up a Vue project using vue-cli 3.x, typescript, pug and .sass files.
I also want to import a couple files globally so that they are available in all my components (I followed this guide)
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import './registerServiceWorker'
import '#/sass/main.sass'
main.sass
#import partials/variables
#import ../../node_modules/globl.css/main
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/sass/partials/_variables.sass";
#import "./node_modules/globl.css/partials/_mixins.sass";
`
}
}
}
}
Navbar component giving me errors
<template lang="pug">
.navbar Navbar
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
<style lang="sass">
.navbar
color: red
</style>
Error log
I noticed that if I remove the sass from the component and convert it to scss the error goes away...
The other issue, in the main.sass file, is still a mystery to me..
I have created a new project using vue-cli 'vue init webpack-simple my-app' command. In that fresh installation copy, I'm trying to import vue-router in the App.vue component that was created by default. But it is giving me an error: 'Uncaught ReferenceError: Vue is not defined'. If I import the vue again in App.vue, then the app is working fine. But I already imported the vue in main.js, so why do I need to import it again in App.js? Is there any way I can use the imported vue from main.js? Here is my code:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue'; //**why I need to import it again? I already imported it in main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import QuestionOne from './components/QuestionOneTemplate';
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
];
const router = new VueRouter({
routes
});
window.router = router;
export default {
router,
name: 'app',
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
Is there any way i can use the imported vue from main.js?
No, you need to import it in every file that uses Vue. The imports/requires are how things get hooked up. Rest assured, each import will be the same singleton instance.
You can get to the router from a Vue component's javascript using this.$router and this.$route without an import, or inside a template, using simply $router and $route
Not recommended, but you can assign Vue to a global in main.js, and use the global without importing.
main.js
import Vue from 'vue';
global.MyVue = Vue
App.vue
import VueRouter from 'vue-router';
MyVue.use(VueRouter);
Why
This is how ES6 links things up. Consider it wiring. If there were more than 1 Vue lib available, how would the linker know which to use? What if another library defined a variable or function called Vue? Perhaps a lib uses its own internal Vue for an event bus or other feature.
Other Thoughts
The explicit import also makes IDE autocompletion and syntax highlighting work better. Some IDEs can add the imports automatically, and that makes life easier.
did you try this ?
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)
because the error message means you need to import vue first to use vue-router
You did the right thing and you don't have to worry about importing Vue in multiple files. When you are shipping your application and build it for production, you will have only one "Vue import". If you take a look at dist folder and your bundled .js files you will notice that Vue is imported only once.