I create vue socket io plugins #/plugins/socket-io.js
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
Vue.use(
new VueSocketIO({
debug: true,
connection: process.env.SOCKET_IO_CONNECTION,
})
)
how to change that to use publicRuntimeConfig
my nuxt.config.js
publicRuntimeConfig: {
peerServerHost: process.env.PEER_SERVER_HOST,
peerServerPort: process.env.PEER_SERVER_PORT,
peerServerPath: process.env.PEER_SERVER_PATH,
},
privateRuntimeConfig: {
signalServerKey: process.env.SIGNAL_SERVER_KEY,
signalServerCert: process.env.SIGNAL_SERVER_CERT,
socketIOConnection: process.env.SOCKET_IO_CONNECTION,
},
I found the way,
move socketIOConnection to publicRuntimeConfig
then in #/plugins/socket-io.js
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
export default function ({ $config }) {
Vue.use(
new VueSocketIO({
debug: true,
connection: $config.socketIOConnection,
})
)
}
Related
I'm having trouble getting Axios to work using the composition API. The following is what I've done, but I'm unsure how to access Axios within setup(). I'm aware that the "this" keyword is no longer available in the composition API.
Created an axio.js file in /plugins:
import axios from 'axios'
export default {
install: (app, options) => {
app.config.globalProperties.axios = axios.create({
baseURL: options.baseUrl,
withCredentials: true,
headers: {
Authorization: options.token ? `Bearer ${options.token}` : '',
}
})
}
}
Added it to plugins/index.js
import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import pinia from '../store'
import router from '../router'
import axios from './axios'
export function registerPlugins (app) {
loadFonts()
app
.use(vuetify)
.use(pinia)
.use(router)
.use(axios, { baseUrl: import.meta.env.VITE_AXIOS_BASE_URL })
}
Then the main.js file registers all plugins:
import App from './App.vue'
// Composables
import { createApp } from 'vue'
// Plugins
import { registerPlugins } from '#/plugins'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')
I use #fawmi/vue-google-maps for show google map in my Vue3 app. Also I use vue-i18n for i18n.
My main.js:
const { createApp } = require("vue");
import VueGoogleMaps from '#fawmi/vue-google-maps';
import * as VueI18n from 'vue-i18n';
import messages from './assets/messages';
import App from './App.vue';
const i18n = VueI18n.createI18n({
locale: 'ar',
fallbackLocale: 'en',
messages,
});
createApp(App)
.use(i18n)
.use(VueGoogleMaps, {
load: {
key: 'myprivatekey',
language: 'ar',
}
})
.mount("#app");
If I want to set language for map by default, it is no problem.
In other files I can set locale dynamically like this
this.$i18n.locale = 'es'
But how I can make it for map component?
Code like below is not working for me (obliviously, because $i18n is not defined here)
.use(i18n)
.use(VueGoogleMaps, {
load: {
key: 'myprivatekey',
language: this.$i18n.locale,
}
})
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
}
})
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]
}
I'm getting the following error when trying to implement vue-router.
Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Where do I need to provide the name option?
A lot of the tutorials I'm looking at seem to be an older version of vue-router. I follow the set-up process but can't get it to work.
Might there be something special I have to do when using the webpack cli template?
I'm also using the vue-router cdn.
Here's my main.js
import Vue from 'vue'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();
const routes = [
{ path: '/', component: App },
{ path: '/info', component: ResourceInfo }
]
const router = new VueRouter({
routes
})
/* eslint-disable no-new */
var vm = new Vue({
el: '#app',
components: { App },
created: function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// Get info for currently signed in user.
console.log(user);
vm.currentUser = user;
console.log(vm.currentUser);
} else {
// No user is signed in.
}
})
// Import firebase data
var quizzesRef = db.ref('quizzes');
quizzesRef.on('value', function(snapshot) {
vm.quizzes = snapshot.val();
console.log(vm.quizzes);
})
var resourcesRef = db.ref('resources');
resourcesRef.on('value', function(snapshot) {
vm.resources.push(snapshot.val());
console.log(vm.resources);
})
var usersRef = db.ref('users');
usersRef.on('value', function(snapshot) {
vm.users = snapshot.val();
console.log(vm.users);
})
},
firebase: {
quizzes: {
source: db.ref('quizzes'),
asObject: true
},
users: {
source: db.ref('users'),
asObject: true
},
resources: db.ref('resources')
},
data: function() {
return {
users: {},
currentUser: {},
quizzes: {},
resources: []
}
},
router,
render: h => h(App)
})
And my App.vue
<template>
<div id="app">
<navbar></navbar>
<resource-info :current-user="currentUser"></resource-info>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'
export default {
name: 'app',
props: ['current-user'],
components: {
Navbar,
ResourceInfo
}
}
</script>
<style>
</style>
In your main.js file, you need to import VueRouter as follows:
import Vue from "vue" // you are doing this already
import VueRouter from "vue-router" // this needs to be done
And below that, you need to initialize the router module as follows:
// Initialize router module
Vue.use(VueRouter)
Other than the above, I cannot find anything else missing in your code, it seems fine to me.
Please refer to the installation page in docs, under NPM section:
http://router.vuejs.org/en/installation.html
First install vue router by using "npm install vue-route" and follow the bellow in main.js
import Vue from 'vue'
import Router from 'vue-router'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();
Vue.use(Router)
var router = new Router({
hashbang: false,
history: true,
linkActiveClass: 'active',
mode: 'html5'
})
router.map({
'/': {
name: 'app',
component: App
},
'/info': {
name: 'resourceInfo',
component: ResourceInfo
}
})
// If no route is matched redirect home
router.redirect({
'*': '/'
});
// Start up our app
router.start(App, '#app')
This might be solve your problem
You forgot to import vue-router and initialize VueRouter in main.js
import VueRouter from "vue-router"
Vue.use(VueRouter)