0

I want to get the text selected in a VueComponent and for this purpose, I want to use the

window.getSelection

function. To have access to the window object, I tried

//in app.js

app.config.globalProperties.$stupidProp = { age: 30, name: "Florian" };
app.config.globalProperties.$window = window;

and then in a function of

//mycomponent.vue
console.log( this.$stupidProp ); //gives undefined
console.log( this.$window ); //gives undefined

What do I do wrong? The app.config.globalProperties.$window stuff comes from here: How to access the window object in vue js? It works for Vue3, which I probably have.

At the end of my body element, I have the following imports

<script src="https://unpkg.com/vue@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
      <script src="assets/js/app.js"></script>
Improve this question
6
  • 1
    in previous versions you would bind window properties to a computed property. has that changed in vue4? is vue4 a thing? do you mean 3.4? Commented Sep 12, 2024 at 3:44
  • 1
    "have the lastest version of Vue" - and you know this because?.. If you're in control of your app, you're capable to know which version you use. There's no Vue 4. The question lacks stackoverflow.com/help/mcve . It's unknown where you use this.$window.getSelection(), it's safe to assume you use it incorrectly, and you're asking about a wrong thing. Also $window serves no good purpose in general Commented Sep 12, 2024 at 8:25
  • @danielRICADO I probably mean Vue 3.4. How to do that exactly, binding window properties (such as the selection) to a computed property? Commented Sep 12, 2024 at 13:04
  • This makes no sense. The window variable is inherently a global JavaScript variable. See: developer.mozilla.org/en-US/docs/Web/API/Window Commented Sep 12, 2024 at 13:11
  • Here you can read more about Vue 3's global variable management: Add global variable in Vue 3 - SO; app.config.globalProperties - Vue Docs Commented Sep 12, 2024 at 13:14

1 Answer 1

Reset to default
0

I somehow managed to solve my problem. The code inside my vue component function looks like this now:

//vuecomponent.js
        console.log("A method in my vue component is executed!");
        console.log(this.$stupidProp); //gives undefined
        console.log(this.$window); //undefined
        console.log(this.window); //gives the correct window object

       console.log(this.$router.$stupidProp ); //gives the correct 
                   stupidProp object
       console.log(this.$router.stupidProp ); //undefined
       console.log(this.$router.$window2); //undefined
       console.log(this.$router.window2); //gives correct window object

The corresponding code in app.js looks like this:

const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
});

router.$window = window;
router.$stupidProp = { age: 30, name: "Florian" };

router.window2 = window;
router.stupidProp2 = { age: 30, name: "Florian" };

/*
Vue.prototype.$window = window;
Vue.prototype.$stupidprop = { stupid: "This is a stupid object", age: 12 }; */
app.config.globalProperties.stupidProp = { age : 30, name: "Florian" };
console.log(app.config.globalProperties.stupidProp);

app.config.globalProperties.window = window;
console.log(app.config.globalProperties.window);

console.log(window);



app.use(router);
app.mount("#gaps");

So I have also set the window object as a property of my router ( a hack of course ). Having written this, I don't really understand what the dollar sign does nor which line of code in app.js (where I set the property) and which line of code in vuecomponent.js (where I access the property) go together. But it works at least now!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You don't need to do anything of this. This is a workaround for a problem that doesn't exist. You can access window as is through the app. The only real reasons for globalProperties.window is to access it in templates, which is a bad practice any way. And to improve testability, but this is rarely required and is done on demand.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.