Get width of parent element in Vue js

created() is the wrong lifecycle hook to do that.

If you check the lifecycle diagram from the docs: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

The element stuff is not yet done (rendered) and only the instance is created.

You most likely what to do that in mounted.

Next, you can access your component's parent via this.$parent and the element via this.$parent.$el.

Check out: https://vuejs.org/v2/api/#Instance-Properties


If you want a specific element from parent, create a ref and access it like:

this.$parent.$refs.refNameYouAdded

If it's a Vue component, then it'd be a Vue instance so you need to access $el again:

this.$parent.$refs.refNameYouAdded.$el

otherwise if it's a HTML element, then no need to do that.


most of the time, the above answers work but sometimes if your parent component does things like moving elements somewhere else then it might not be accurate.

as mentioned in the comment, you can still access the correct parent element by doing:

this.$el.parentElement