I need help pre-rendering my site. So at first, I had a fully functional site. I wanted to add pre-render-spa plugin to the server. but everything got ruined. I needed to update the Vuetify framework too. and that messed it all up. Got a lot of errors but managed to deploy the server but when I do I get this "Vuetify is not properly initialized," so I need help initialized the new Vuetify into my CLI 3 vue.
My Main.js File.
Main.js
import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/style.css';
var VueScrollTo = require('vue-scrollto');
import VueAnalytics from "vue-analytics";
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
attempt: 1,
observer: true,
})
Vue.use(VueScrollTo)
Vue.config.productionTip = false;
Vue.use(VueAnalytics, {
id: "UA-89031274-11",
autoTracking: {
screenview: true
}
});
new Vue({
router,
store,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
vue.config.js
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports.plugins.push = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
inject: false
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, './dist'),
routes: ["/"]
}),
new VuetifyLoaderPlugin()
]
}
};
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/styles/main.sass'
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi'
},
})
So this is all the file that come to relate with the pre-rendering and vuetify. I tried to reinstall vuetify and vue-cli and npm install nothing has fixed the problem that vuetify is not loading.
I saw that vuetify updated their installing documents and they said to include vuetify before the $mount("#app");
in this case the build just keep going forever and doesn't stop.
new Vue({
router,
store,
vuetify,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
Greatful for the help.
In main.js changed
import './plugins/vuetify'
to
import vuetify from './plugins/vuetify'**
and then add it into new Vue instance like this:
new Vue({
...
vuetify,
...
}).$mount('#app')
for example, main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
and vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
iconfont: 'md',
theme: {
primary: colors.green.darken1,
secondary: colors.green.lighten4,
accent: colors.green.darken3
}
})
Related
I have lots of Vue components. I want to set up routing for them from the main.js file. But I'm unable to import my component here as it is a javascript file. How can I import my Vue component(.vue) here?
import Vue from 'vue'
import App from './App.vue'
// Components importing
import LandingPage './components/LandingPage.vue'; // error occurs here
const routes = [
{ path: '/', component: LandingPage },
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
Try to import like
import { LandingPage } './components/LandingPage.vue'
Or make export default to LandingPage component.
I am trying to push data from an api call to my store, but I keep getting errors like commit is undefined and dispatch is undefined.
If I understood documents correctly I can only manipulate state from components by creating mutations? been going round in circles for an hour now and would appreciate some guidance.
in main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import 'es6-promise/auto'
Vue.config.productionTip = false
new Vue({
router,
render: (h) => h(App),
store: store,
}).$mount('#app')
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
images: [],
},
mutations: {
addImages(state, newImages) {
state.images = []
state.images.push(newImages)
},
},
})
Header.js component:
<template>
<div>
<h1>Nasa Image Search</h1>
<div class="search-container">
<form action="/action_page.php">
<input v-model="searchWord" type="text" placeholder="Search.." name="search" />
<button v-on:click.prevent="search" type="submit">Search</button>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Header',
data: () => ({
searchWord: "",
//images: [],
}),
methods: {
search() {
let url
this.searchWord
? url = `https://images-api.nasa.gov/search?q=${this.searchWord}&media_type=image`
: url = `https://images-api.nasa.gov/search?q=latest&media_type=image`
console.log(url) //bug testing
axios
.get(url)
.then(response => {
const items = response.data.collection.items
console.log(items)
this.$store.commit('addImages', items)
console.log(this.$store.state.images)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
Your code is perfectly fine, please create a new file store.js as below and import it in main.js and it will work. In newer version of vuex eg 4.0 we do have createStore function using which we can include store code in main.js file itself.
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: { images: [], },
mutations: {
addImages(state, newImages) {
state.images = []
state.images.push(newImages)
},
},
});
main.js
import Vue from "vue";
import App from "./App.vue";
import { store } from "./store";
import router from './router'
import 'es6-promise/auto'
Vue.config.productionTip = false;
new Vue({
router, store,
render: h => h(App)
}).$mount("#app");
in Vue 3 with Vuex 4 -> We can have store code inside main.js as below. doc link https://next.vuex.vuejs.org/guide/#the-simplest-store
import { createStore } from 'vuex'
import { createApp } from 'vue'
const store = createStore({
state () {
return {
}
}
})
const app = createApp({ /* your root component */ })
app.use(store)
Normally I create my Vuex 'store' in a separate file and import it into main.js.
I did a local experiment where I declared 'const store' in main.js AFTER instantiating new Vue() in main.js, as you are doing, and am getting errors.
Try declaring 'const store' BEFORE new Vue().
I want to translate my whole component with i18n and I don't know how to use $t() in this use case. I have data like this
[
{"prizeCount":"300","prizeSum":"2442000","gameStartAt":"2018-01-08 13:00:00.000000"},
{"prizeCount":"288","prizeSum":"2530000","gameStartAt":"2018-01-09 12:00:00.000000"}
]
I pass this data to :items="mydata" for table and I want to translate title of my fields for example I want to translate prizeCount to another language.
I am using vue-bootstrap.
What is the best solution for this?
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import i18n from './i18n'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App
},
i18n,
template: '<App/>'
})
You can add it like this:
new Vue({
el: '#app',
router,
components: {
App
},
i18n,
t: i18n.t,
template: '<App/>'
})
Than in your component you can use $t or this.$t in your methods.
For get keys from your object you can do like this:
data: [
{"prizeCount":"300","prizeSum":"2442000","gameStartAt":"2018-01-08 13:00:00"},
{"prizeCount":"288","prizeSum":"2530000","gameStartAt":"2018-01-09 12:00:00"}
]
data.forEach( obj => {
let keys = Object.keys(obj)
// ['prizeCount', 'prizeSum', 'gameStartAt']
newData = []
newObj = {}
keys.forEach( key => {
let val = obj[key]
let trans = this.$t(key)
newObj[trans] = val
})
newData.push(newObj)
})
Hey I have some bullshit issue with store not being defined. Any advice so I can move on and finish this software build? Store and contents of store appears in Vue Inspector tools. When put inline like below it breaks and renders blank - no DOM content inside App component.
App.vue offending excerpt
<div v-if="$store.state.showPreloader == true" id="preloaderWrap">
<div id="preloader"></div>
</div>
Store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
stuff
}
const mutations = {
stuff
}
const getters = {
stuff
}
const actions = {
stuff
}
export default new Vuex.Store({
state: state,
mutations: mutations,
getters: getters,
actions: actions
})
Main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueGraph from '../node_modules/vue-graph'
import VueMaterial from '../node_modules/vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.config.productionTip = false;
Vue.use(VueGraph);
Vue.use(VueMaterial);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
You need to init Vue with store:
new Vue({
el: '#app',
router,
store: store,
components: { App },
template: '<App/>'
})
This is the code I have given in commonValidation.js.
commonValidation.js:
this.$validator.localize('en', {
messages: {
required: (field) => '* ' + field + ' is required'
},
attributes: {
email: 'Email'
}
})
I want to call the above file in main.js inside the mounted function
like below. But it's not working. If I given those validation(from commonValidation.js) inside the mounted()(in main.js) method it's working.
main.js:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
mounted()
{
commonValidation
}
})
Please help me to call the commonValidation.Js inside the mounted() in main.js . Thanks in advance.
This is my complete commonValidation.js
export default {
mounted() {
this.$validator.localize('en', {
messages: {
required: (field) => '* ' + field + ' is required'
},
attributes: {
email: 'Email'
}
})
}
}
You are exporting an object in commonValidation.js file.
An object cannot be invoked like a function.
I think your intent is to use a mixin. A mixin is nothing but an object that contains reusable component options as its properties.
So just register the mixin on the root component in your main.js file:
//main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
mixins : [commonValidation]
}