Enviroment variables not available in main.js - javascript

I created project with Vue-CLI 2.9.6 and now I would like use API_URL from .env but it isn't available in main.js. How can I use API_URL from .env in main.js?
Code:
import 'bootstrap-vue/dist/bootstrap-vue.css';
import axios from 'axios';
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';
import store from './store/store';
import Logger from './utils/Logger';
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
const baseAxios = axios.create({
baseURL: process.env.API_URL,
});
Vue.prototype.$http = baseAxios;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
});
I need use API_URL because I would like set baseUrl on axios.

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:
https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

Related

Vue router in main.js: this dependency was not found error

When I run npm run serve I get the This dependency was not found error, relating to the router that I'm trying to use in the main.js. I don't understand why this happens - the router is created and exported from src/router/router/js file and imported in the main.js file.
main.js:
import App from './App.vue'
import './assets/tailwind.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from 'router/router.js'
Vue.config.productionTip = false
Vue.use(VueRouter);
const app = new Vue({
render: h => h(App),
}).$mount('#app')
app.use(router);
router.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
This is my directory structure:
I get this error:
This dependency was not found:
* router/router.js in ./src/main.js
You have not imported the router correctly, it should be like this instead:
import router from './router/router.js'
Normally it should work now.
Edit:
Try making a new vue project with the router preset.
I change import to
import router from `./router/router.js
And also made new project with Vue 3 (was used Vue 2 for this one), where I installed vue-router#next. Then I followed this tutorial: https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
Changed main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'
createApp(App).use(router).mount('#app')

Component Not Found (Vuetify & Vuejs)

Component not found error. In vuetify 1.5.5 and vue 2.6.12 with vue-template-compiler 2.6.12. I have tried some guys on Discord but they cant seem to figure out what might be the problem here. Sometimes it issues our=t the component not found error, sometimes it doesnt run at all even if both libraries are the same version.
App.Vue
<template> <v-app>
<v-content>
<router-view></router-view>
</v-content></v-app>
</template><script>
export default {
name: "App",
components: {},
mounted() {},
data: () => ({}),
};
</script>
<style>
</style>
So the main.js contains mostly imports from javascript and initialization of libraries and modules main.js
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store/index";
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import "./plugins/vuetify";
import 'animate.css'
import './assets/custom.css'
import './assets/table.css'
import './assets/google-like-text.css'
import VeeValidate from "vee-validate";
import VueSession from "vue-session";
import VueGoogleCharts from 'vue-google-charts';
import 'vue-orgchart/dist/style.min.css'
import Snotify from 'vue-snotify'
import 'vue-snotify/styles/material.css';
Vue.use(VeeValidate, { inject: false });
var options = {
persist: true
};
Vue.use(VueSession, options);
Vue.use(VueGoogleCharts);
Vue.use(Snotify)
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
And vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import 'vuetify/dist/vuetify.min.css'
import colors from "vuetify/es5/util/colors"
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
primary: "#2E7D32",
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})

after adding vuex to main.js components don't render

My apologies with this dumb question. I'm new to Vue and followed some tutorial on just setting it up and did it the way advised but now I don't see anything.
As said above, after importing and adding Vuex to my project, nothing is loaded on the page and there are no errors in the terminal while running the development server.
main.js
// ** if I comment these out then the page will load
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store.js' // <-- **
Vue.config.productionTip = false
new Vue({
router,
store, // <-- **
render: h => h(App)
}).$mount('#app')
store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.store({
state: {
user: '',
role: ''
},
mutations: {
},
actions: {
},
getters: {
}
})
if there is additional information needed then let me know

Vuex store this.$store is undefined in Vue.js component

I have a new vue-cli webpack project using Vuex. I've initialized my Vuex store in store.js like this:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {}
});
export default store;
In my App.vue I am importing store from './store.js' which works just fine, but this.$store is undefined. What am I missing?
Here is my App.vue
<script>
import Navigation from "#/components/Navigation";
import axios from "axios";
import store from "./store";
export default {
created() {
console.log("store from $store", this.$store);
console.log("store from store: ", store);
}
}
</script>
The second console.log(store) works just fine.
I found the solution. In my main.js I was not setting the store on the Vue instance. For anyone else that ever gets stuck on this, here's what you need:
main.js
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store"; // this
require("./assets/styles/main.scss");
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
store, // and this
components: { App },
template: "<App/>"
});

Why is setting Vue.http for vue-resource ignored?

I'm using Vue.js 2.3.3, Vue Resource 1.3.3, Vue Router 2.5.3, and I'm trying to set up Vue-Auth. I keep getting a console error, however, that says auth.js?b7de:487 Error (#websanova/vue-auth): vue-resource.1.x.js : Vue.http must be set.. I'm setting Vue.http in main.js, but vue-resource is not picking it up for some reason.
main.js:
import Vue from 'vue'
import Actions from 'actions'
import App from './App'
Vue.use(Actions, {
locales: ['en', 'zh', 'fr']
})
Vue.http.options.root = 'https://api.example.com'
new Vue({
render: h => h(App),
watch: {
lang: function (val) {
Vue.config.lang = val
}
}
}).$mount('#app')
actions/index.js
import VueResource from 'vue-resource'
import Router from 'actions/router'
import I18n from 'actions/i18n'
export default {
install (Vue, options) {
Vue.use(Router)
Vue.use(I18n, options.locales)
Vue.use(require('#websanova/vue-auth'), {
router: require('#websanova/vue-auth/drivers/router/vue-router.2.x'),
auth: require('#websanova/vue-auth/drivers/auth/bearer'),
http: require('#websanova/vue-auth/drivers/http/vue-resource.1.x')
})
}
}
And if I add Vue.use(VueResource) to actions/index.js right below Vue.use(Router), I get a new error: Error (#websanova/vue-auth): vue-router.2.x.js : Vue.router must be set.
On the other hand, if I move Vue.http.options.root = 'https://api.example.com' to right below the import statements, I get yet another error: Uncaught TypeError: Cannot read property 'options' of undefined
You need to import 'vue-resource' in to your main.js file to get ride of this errors:
import Vue from 'vue'
import VueResource from 'vue-resource';
import Actions from 'actions'
import App from './App'
Vue.use(Actions, {
locales: ['en', 'zh', 'fr']
})
Vue.use(VueResource)
Vue.http.options.root = 'https://api.example.com'
new Vue({
render: h => h(App),
watch: {
lang: function (val) {
Vue.config.lang = val
}
}
}).$mount('#app')
Using axios and not vue-resource this is a working setup for me:
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueRouter)
Vue.use(VueAxios, axios)
Vue.router = new VueRouter({
// Your routes.
})
Vue.use(require('#websanova/vue-auth'), {
auth: require('#websanova/vue-auth/drivers/auth/bearer.js'),
http: require('#websanova/vue-auth/drivers/http/axios.1.x.js'),
router: require('#websanova/vue-auth/drivers/router/vue-router.2.x.js'),
})
App.router = Vue.router
new Vue(App).$mount('#app')
For more guidance you can refer to this great tutorial: https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0

Categories