Has anyone experienced this problem? I'm using Vue Devtools but can't inspect any components on a count of none are showing up. No Root component or anything. Pretty much just a blank DevTools. I'm new to Vue so I'm sure I'm missing something obvious. I'm using the webpack cli template and haven't implemented any Vue Router stuff yet. Nothing comes up when searching for components either. I'm assuming it's something in these 3 files?
main.js
import Vue from 'vue'
import App from './App'
var db = firebase.database();
var vm = new Vue({
el: '#app',
created: function() {
// Import firebase data
var quizzesRef = db.ref('quizzes');
quizzesRef.on('value', function(snapshot) {
console.log(snapshot.val());
vm.quizzes = snapshot.val();
});
},
data: function() {
return {
authenticated: false,
quizzes: {},
resources: []
}
},
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="app">
<navbar></navbar>
<resource-info></resource-info>
</div>
</template>
<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'
export default {
name: 'app',
components: {
Navbar,
ResourceInfo
}
}
</script>
<style>
</style>
Index.html (Omitted header)
<body>
<div id="app" class="container-fluid"></div>
<!-- built files will be auto injected -->
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
</script>
</body>
I had the same issue and here's what fixed it for me:
Ensure Allow access to file URLs in the chrome extension settings (chrome://extensions) is enabled. Restart Chrome.
Open the Vue DevTools extension and click the Refresh button on the top right after opening a Vue component on the page.
I hope this helps someone.
I see that you are using vue-cli and I assume it is running in dev mode (npm run dev).
Obviously it will not work after you build the production app using npm run build and serve from the dist folder.
Assuming you have taken care of the above, did you install the Vue.js devtools recently in Chrome? If so, your browser might need a restart. I think I had to do it when I installed Vue devtools for the first time.
After all that, you should start seeing your components in "Vue" tab of developer tools. You might see Anonymous component for some components, but all you need is name: app which is something you are already doing in your App.vue component.
I had the same issue! Not much to find scratching around for help, but this worked for me:
change the webpack.config.js setting for NODE_ENV: '"production"' to NODE_ENV: '"development"'
Seems almost too obvious but the rendered Vue app(s) then appeared like magic showing all the object goodness!
Related
I followed directions on how to use the component from their documentation however I get TypeError: show is not a function
In my main JS file (app.js) I added the following and adding to my project using npm
import VModal from 'vue-js-modal'
Vue.use(VModal)
The documentation states that I can now call a modal from anywhere in the app, so I created a page specific JS file and included the following to hide/show a modal with name="hello-world" on the page that included vue, app.js and the page specific profile.js file.
export default {
methods: {
show() {
this.$modal.show('hello-world');
},
hide() {
this.$modal.hide('hello-world');
}
}
}
When I load the page, I don't see the modal content, however when I click the link Modal I get an error about the show method TypeError: show is not a function
I am using laravel mix and verified that everything is being compiled as expected. Below is a how I am including JS files on the profile page:
<script type='text/javascript' src='/assets/js/manifest.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/vendor.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/app.js?ver=1569678574'></script>
<script type='text/javascript' src='/assets/js/profile.js?ver=1569678574'></script>
I am trying to "level up" my Vue and JavaScript experience, previously I just stuck to writing ES5 and my Vue was written without components and bound to a page specific Vue instance, so any help would be greatly appreciated!
EDIT
app.js
window.Vue = require('vue');
require('./global/header.js');
Vue.component('tabs', require('./components/Tabs.vue'));
Vue.component('tab', require('./components/Tab.vue'));
import VModal from 'vue-js-modal'
Vue.use(VModal)
new Vue({
el: '#app'
});
profile.js
export default {
methods: {
show() {
this.$modal.show('hello-world');
},
hide() {
this.$modal.hide('hello-world');
}
}
}
webpack.mix.js that compiles profile.js
mix
.js("resources/js/pages/home.js", "assets/js/home.js")
.js("resources/js/pages/teams.js", "assets/js/teams.js")
.js('resources/js/pages/profile.js', 'assets/js/profile.js')
The error doesn't specify if its the $modal.show() function or your profile.js show() function that is undefined. I suspect that it's your profile.js show() function because it looks like everything is in order with regards to vue-js-modal.
You need to add profile.js as a vue mixin (https://v2.vuejs.org/v2/guide/mixins.html) in order for its functions to be added to the vue instance. So in your app.js add:
import profile from '/assets/js/profile'
Vue.mixin(profile);
Vue Js app working fine in dev mode, but as I upload it on the server, it simply displays a blank page. All the resources are showing up in the developer console. I am using vue-router package.
VueJs 2 / Vue-CLI-3
Below is my App.vue
<template>
<div id="app">
<m-nav/>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from './components/Navbar.vue'
export default {
name: 'app',
components: {
'm-nav':Navbar
}
}
</script>
<style>
</style>
This is my main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import HomePage from './components/HomePage.vue'
import Brochure from './components/Brochure.vue'
import Register from './components/Register.vue'
Vue.config.productionTip = false
Vue.use(VueRouter);
const routes = [
{
path:'/',
component: HomePage
},
{
path:'/download',
component: Brochure
},
{
path:'/register',
component: Register
}
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
router,
render: h => h(App),
}).$mount('#app');
after running npm run build, It shows a blank page, although I can see some stuff in the DOM <div id="app"></div>
http://prntscr.com/lvasvo
I am not getting, where I have made a mistake! The project is complete, but stuck on this part! :(
follow this tips:
use <%= BASE_URL %> for script and link tags which wrote on index.html
create vue.config.js in root of project and config your public path for production and development mode like:
module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/"
}
};
just use relative path, to know more about it, read this link:
https://cli.vuejs.org/config/#publicpath
create config.vue.js
In my case the issue was in the Router.beforeEach function that I had in index.js file inside the router folder to add a route guard. I had to rewrite it after upgrading it from Vue 2 to Vue 3 to make it work.
Just encounter the same issue with vue-cli3 project.
And my main reason getting this issue is my app doesn't deploy on the root of the domain,instead on a sub-path.
There're several tricky configures:
vue.config.js (it's vue-cli3 exclusive): to set publicPath:/my-app/ ;
router.js (assuming your vue-router config file is this): to set base:/my-app/;
And beware of the history router mode:
this mode needs extra server side config, I'm using nginX, this is my config:
location /my-app {
alias /var/www/my-app;
try_files $uri /index.html last;
index index.html;
}
And beware of the different between alias and root.
this mode is not support relative path publicPath:./ in vue.config.js.
I'm upgrading a project from laravel-mix v2.0 to v4.0 and I'm seeing an issue now where at runtime my components can't see globally scoped variables like they did before. How can upgrading the build tool impact the runtime?
I see I can add instance properties to the vue prototype, but is that really the approach I need to take? Seems like it should still be able to read global variables like it did before.
html
<script type="text/javascript">
var games = [
// a bunch of objects
];
</script>
<script src="{{ mix('js/app.js') }}"></script>
app.js
import ChannelSubscriptionSlider from './components/guild-subscriptions/ChannelSubscriptionSlider.vue';
Vue.component('channel-subscription-slider', ChannelSubscriptionSlider);
ChannelSubscriptionSlider.vue
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
export default {
data: function () {
return {
games: games, // undefined when used within this component, but used to work before upgrade
}
},
Edit 2
Use `window.games, this would "register" your variables globally.
Although, what i do, is the following, consider a MPA not a SPA:
In app.js i just leave the following lines:
require('./bootstrap');
window.Vue = require('vue');
In a separate file, called main.js that i made, i put this, as an example:
import Sidebar from './components/layouts/Sidebar.vue'
import Topnav from './components/layouts/Topnav.vue'
new Vue({
el: '#sidebar',
render: h => h(Sidebar)
});
new Vue({
el: '#topnav',
render: h => h(Topnav)
});
at the end of app.blade.php i put:
<script src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript">
const user_props = {
fullName : {!! json_encode(Auth::user()->fullName) !!},
username : {!! json_encode(Auth::user()->username) !!},
}
user_props.install = function(){
Object.defineProperty(Vue.prototype, '$userProps', {
get () { return user_props }
})
}
Vue.use(user_props);
</script>
<script src="{{ asset('js/main.js') }}"></script>
This works because i mount vue in app.js but the components that use user_props are loaded after i declare and install the prototype... Also, since vue is mounted in app.js i can use Vue.use(user_props); after loading it...
And forgot to mention that in webpack.mix.js you should add the main.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/main.js', 'public/js/')
Edit 1
Based on your comments, and the docs: https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html#The-Importance-of-Scoping-Instance-Properties
The $ is just a convention:
... We scope instance properties with $ to avoid this. You can even use your own convention if you’d like, such as $_appName or ΩappName, to prevent even conflicts with plugins or future features.
So with that in mind you could set it up as:
Vue.prototype.games = games;
then you can access it on every component as this.games
As the documentation implies, when doing this you've got to be careful to not overwrite it. So if you have it declared on the data section of your Vue components i think you should delete those lines...
I am experimenting with Vue and would like to develop a node app with my usual setup which uses budo(browserify + watchify).
./index.html:
<div id="app">
{{ message }}
</div>
<!-- ===================== JavaScript Files Below This Line =============== -->
<script src="index.js"></script>
and ./src/js/main.js
const Vue = require('vue');
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
module.exports = app;
with ./index.js
// js includes
require('./src/js/main');
I cant see the message on the page. I see index.js in the console with main.js injected into it. When I use the Vue CDN with the vue code in index.html that works ok. I was hoping someone could shed some light on how one uses CommonJS modules to import vue code into their app when bundling w/browserify. Thanks in advance...
As explained here Vue.js not rendering you need to add this to your
package.json file:
"browser": {
"vue": "vue/dist/vue.common.js"
}
I'm a new vuejs developer. I have study vueje for a while and now I decided to develop a project using vuejs.
So I learn about nuxtjs which is server side rendering. everything goes well. I can use bootstrap4 with my project.
Now I would like to use flickity carousel https://flickity.metafizzy.co on my project and I found that there is a vuejs package on https://github.com/drewjbartlett/vue-flickity
I follow the instruction how to install this component to my project by
npm install vue-flickity --save
and put on some code
<script>
import Logo from '~/components/Logo.vue'
import Searchbar from '~/components/Searchbar.vue'
import axios from 'axios'
import Flickity from 'vue-flickity';
export default {
data () {
return {
has_location: false,
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: false,
wrapAround: true
}
}
},
components: {
Logo,
Searchbar,
Flickity
}
}
</script>
but it show window is not defined
I have try this with another component like google map, it's show the same error.
Please tell me what wrong did I do and how to install new component to the project.
Thank you.
Nuxt.js use SSR to render your website server side, therefore window object is not accessible on node.js environment.
What you need to do is use the built-in no-ssr component to prevent Nuxt.js to render it on the server side.
You can simply do this:
<no-ssr>
<Flickity :options="...">
<!-- slides -->
</Flickity>
</no-ssr>
UPDATE: If you still get an error at this point, then load Flickity in
a custom Plugin that you will load with ssr disabled
Create a file named plugins/VueFlickity.js
import Vue from 'vue'
import Flickity from 'vue-flickity'
Vue.component('Flickity', Flickity)
Then in your nuxt.config.js your add:
module.exports = {
// ...
plugins: [
{ src: '~/plugins/VueFlickity.js', ssr: false }
]
}
Don't forget to remove the Flickity local component registration:
components: {
Logo,
Searchbar
// Flickity <-- remove this line
}
This was tested and is now fully working.
I fixed it with:
let Flickity = {};
if (process.browser) {
Flickity = require('flickity.js');
}
#rayfranco pointed a great way.:) The thing is that by doing this in that way You're importing this plugin globally, but not as local component which is better for performance.
So You can do it also like this:
let Flickity;
if (process.client) {
Flickity = require('vue-flickity')
}
export default {
components: {
Flickity
}
}
and use this component this way:
Important: <no-ssr>......</no-ssr> is deprecated in Nuxt > 2.9, so use
<client-only>
<Flickity :options="...">
<div class="carousel-cell">1</div>
<div class="carousel-cell">2</div>
<div class="carousel-cell">3</div>
</Flickity>
</client-only>
you can also look into brief example by Josh Deltener
https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/