Tips for streamlining repetitive code in Vue 3 Composition API (such as router and store integration)

Question

Tips for streamlining repetitive code in Vue 3 Composition API (such as router and store integration)

When using the Vue 3 Composition API, it is necessary for each view to include the following:

import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'


export default {
    setup() {
        const router = useRouter()
        const store = useStore()

        // ...
     }
}

Is there a more efficient way to declare these dependencies once, pass them to the created app, and then easily use them without having to redeclare them in every view within the app? In Vue 2, these were passed during initialization and could be accessed simply as this.$store / this.$router.

One potential approach involves utilizing global variables, although this method can lead to issues. For example, in the app.vue file, you could declare them like this:

import { useStore } from 'vuex'

export default {
    setup() {
        globalthis.store = useStore()

Then, the store variable would be accessible throughout the application.

vue.js vuejs3 vue-composition-api

Answer 1

Answer №1

The component instance is not accessible within the setup() function due to the fact that the component has not been initialized yet, resulting in the absence of a this context in the Composition API required for using this.$store.

To access the store/router variables in the setup() function without any additional imports, one potential solution is to assign them as global variables to window/globalThis (ignoring the common concerns related to global variables):

// router.js
import { createRouter } from 'vue-router'
export default createRouter({/*...*/})

// store.js
import { createStore } from 'vuex'
export default createStore({/*...*/})

// main.js
import router from './router'
import store from './store'

window.$router = router
window.$store = store

It's important to note that with Vuex 4 and Vue Router 4, the store and router can still be accessed using the Options API and within the template as $store and $router, respectively:

<template>
  <div>{{ $store.state.myProp }}</div>
  <button @click="$router.back()">Back</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store.state.myProp)
    console.log(this.$router.currentRoute)
  }
}
</script>

Answer 2

The component instance is not accessible within the setup() function due to the fact that the component has not been initialized yet, resulting in the absence of a this context in the Composition API required for using this.$store.

To access the store/router variables in the setup() function without any additional imports, one potential solution is to assign them as global variables to window/globalThis (ignoring the common concerns related to global variables):

// router.js
import { createRouter } from 'vue-router'
export default createRouter({/*...*/})

// store.js
import { createStore } from 'vuex'
export default createStore({/*...*/})

// main.js
import router from './router'
import store from './store'

window.$router = router
window.$store = store

It's important to note that with Vuex 4 and Vue Router 4, the store and router can still be accessed using the Options API and within the template as $store and $router, respectively:

<template>
  <div>{{ $store.state.myProp }}</div>
  <button @click="$router.back()">Back</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store.state.myProp)
    console.log(this.$router.currentRoute)
  }
}
</script>

Answer 3

Answer №2

Check out the amazing AutoImport Plugin created and maintained by Anthony Fu. This tool eliminates the need to manually add imports in your code, supporting Eslint and TypeScript.

Say goodbye to constantly scrolling between your logic and import statements - AutoImport reduces noise and allows you to focus on your domain.

The plugin also offers presets for vue, vue-router, vueuse, and more.

Shown below is a configuration example used in a Quasar project:

        AutoImport({
          // Specify targets to transform
          include: [
            /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
            /\.vue$/,
            /\.vue\?vue/, // .vue
            /\.md$/, // .md
          ],

          // Register global imports
          imports: [
            // Presets
            `vue`,
            `vue-router`,
            `@vueuse/core`,
            `quasar`,
            `vue-i18n`,
            // Custom
            {
              'quasar': [
                `setCssVar`,
                `colors`,
                `extend`,
                `EventBus`,
                `Notify`,
                `QItemSection`,
              ],
              'dedent': [
                [`default`, `dedent`],
              ],
            },
            {
              from: `vue`,
              imports: [`CSSProperties`],
              type: true,
            },
          ],
          // Enable auto import based on filename for default module exports within directories
          defaultExportByFilename: false,

          // Auto import for module exports within directories
          dirs: [
            // './hooks',
            // './composables' // Only root modules
            // './composables/**', // All nested modules
            // ...
          ],

          // Filepath to generate corresponding .d.ts file
          dts: `./auto-imports.d.ts`,

          // Disable auto import inside Vue template
          vueTemplate: false,

          // Custom resolvers, compatible with `unplugin-vue-components`
          resolvers: [
            /* ... */
          ],

          // Inject the imports at the end of other imports
          injectAtEnd: true,

          // Generate corresponding .eslintrc-auto-import.json file
          eslintrc: {
            enabled: true, // Default `false`
            filepath: `./.eslintrc-auto-import.json`, // Default `./.eslintrc-auto-import.json`
            globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
          },
        }),

Answer 4

Check out the amazing AutoImport Plugin created and maintained by Anthony Fu. This tool eliminates the need to manually add imports in your code, supporting Eslint and TypeScript.

Say goodbye to constantly scrolling between your logic and import statements - AutoImport reduces noise and allows you to focus on your domain.

The plugin also offers presets for vue, vue-router, vueuse, and more.

Shown below is a configuration example used in a Quasar project:

        AutoImport({
          // Specify targets to transform
          include: [
            /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
            /\.vue$/,
            /\.vue\?vue/, // .vue
            /\.md$/, // .md
          ],

          // Register global imports
          imports: [
            // Presets
            `vue`,
            `vue-router`,
            `@vueuse/core`,
            `quasar`,
            `vue-i18n`,
            // Custom
            {
              'quasar': [
                `setCssVar`,
                `colors`,
                `extend`,
                `EventBus`,
                `Notify`,
                `QItemSection`,
              ],
              'dedent': [
                [`default`, `dedent`],
              ],
            },
            {
              from: `vue`,
              imports: [`CSSProperties`],
              type: true,
            },
          ],
          // Enable auto import based on filename for default module exports within directories
          defaultExportByFilename: false,

          // Auto import for module exports within directories
          dirs: [
            // './hooks',
            // './composables' // Only root modules
            // './composables/**', // All nested modules
            // ...
          ],

          // Filepath to generate corresponding .d.ts file
          dts: `./auto-imports.d.ts`,

          // Disable auto import inside Vue template
          vueTemplate: false,

          // Custom resolvers, compatible with `unplugin-vue-components`
          resolvers: [
            /* ... */
          ],

          // Inject the imports at the end of other imports
          injectAtEnd: true,

          // Generate corresponding .eslintrc-auto-import.json file
          eslintrc: {
            enabled: true, // Default `false`
            filepath: `./.eslintrc-auto-import.json`, // Default `./.eslintrc-auto-import.json`
            globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
          },
        }),

Tips for streamlining repetitive code in Vue 3 Composition API (such as router and store integration)

Answer №1

Answer №2

Similar questions

unable to transfer Vuex store information to the graph

Rendering content on the server side and creating a cached version of the index.html file using Vuejs and Nodejs

Is there a Nuxt/Vue glitch causing the server to be called multiple times on a single route or page?

Encountering issues with npm installation on a Linux operating system

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

Masked input fails to accurately capture data

How can I retrieve server-side data in the client-side using NodeJs (connecting to MySql) with Vue CRUD?

The system was unable to locate node.js with socket.io

Utilizing Vue.js to fetch information from a post API in Node.js

Can Vue.js be paired with pure Node.js as a backend without relying on Express?

Vue-ctl project creation halted by operating system rejection

Having difficulty setting up a Vue app due to an error message indicating that an outdated version of NPM is being used, despite having already updated to the latest version

Leveraging Javascript Modules within a Typescript Vue Application

Guide on extracting data from MongoDB using VueJs

Can anyone help with displaying a PNG image in Vue/Node/Express? I am struggling to show the image that I sent from a Node.js server to a Vue app client

Transmitting data from express server to vue.js interface

Is it more advantageous to create two distinct projects for the frontend and backend along with an API, or should I consolidate them into a

Where can Vue.js be found?

Converting a string into an array of JSON objects

Utilizing Nicknames in a JavaScript Function