primordic/IssueDupesLite huggingface dataset:
Repository: vuejs/docs

Issue #2073: Tutorial step 3 doesn't work under Firefox
Created: 2022-10-23T05:18:16Z
Vue version
recent version
Link to minimal reproduction
https://vuejs.org/tutorial/#step-3
Steps to reproduce
Clicked on "Show me!"
What is expected?
"Make me red" did turn into red because of iframe issue
What is actually happening?
Console log:
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. tutorial
[@vue/repl] successfully compiled 1 module. utils.a9fa9546.js:1:931566
Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”. tutorial:7:118
Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”. tutorial:1:40
^^ Module TypeError above is polyfilled and can be ignored ^^ srcdoc:160:15

System Info
- Linux Mint 21
- Firefox 106.0.1
Any additional comments?
No response

Duplicate issue #2090: tutorial/step-1: Error message shown when SFC is enabled (default)
Created: 2022-11-16T20:14:19Z
Is this because of me using Firefox?

In English this would roughly read

Error while resolving module specifier "vue". Relative module specifiers have to start with "./", "../" or "/".

Closing comment (2022-11-17T04:42:05Z): Possibly the same as #2073. There's a polyfill being used to get the import map to work with Firefox, but that seems to be failing in some cases.
Repository: vuejs/docs

Issue #1609: Missing `getCurrentInstance` API
Created: 2022-03-09T14:46:59Z
getCurrentInstance was previously available on https://v3.vuejs.org and is missing on https://vuejs.org

Duplicate issue #2491: Missing search result for getCurrentInstance
Created: 2023-09-01T06:32:52Z

Closing comment (2023-09-01T06:47:49Z): Duplicate of #1609, #1775, #2335, #2361, #2424, #2490
Repository: vuejs/docs

Issue #1609: Missing `getCurrentInstance` API
Created: 2022-03-09T14:46:59Z
getCurrentInstance was previously available on https://v3.vuejs.org and is missing on https://vuejs.org

Duplicate issue #2424: Missing search result for getCurrentInstance
Created: 2023-06-28T02:09:39Z

Closing comment (2023-06-28T02:43:03Z): Duplicate of #1609, #1775, #2335, #2361
Repository: vuejs/docs

Issue #244: Click the drop-down title, then click elsewhere on the page, the drop-down list always show.
Created: 2020-07-19T03:44:23Z
Click the drop-down title, then click elsewhere on the page, the drop-down list always show. when you click the drop-down title again, the drop-down list will disappear.

I think it can be changed to this:
Click the drop-down title, then click elsewhere on the page, and the drop-down list disappears.

Duplicate issue #259: NavLink dropdown menu doesn't close if you click on the NavLink
Created: 2020-07-19T18:33:03Z
Steps to reproduce:

Hover over any NavLink, a dropdown should appear
Click on the NavLink itself
Move cursor out of the link to close the dropdown
Dropdown doesn't close

Closing comment (2020-07-19T18:38:44Z): Duplicate of #244
I don't think this issue is specific to the documentation repository. Would you mind opening an issue on VuePress repo instead?
Repository: vuejs/docs

Issue #3: Modify home page to have the same features as Hexo main page
Created: 2019-12-18T15:54:29Z
Buttons for  Why Vue.js and Get Started
 VueMastery video modal
 Patreon and OpenCollective sponsors integrations
 Patreon sponsors update bot integration
 Subscribe to Newsletter form

Duplicate issue #12: Migrate home page content
Created: 2020-01-08T13:40:21Z
Requirements


  Home page should look like the current vuejs.org site
  Content should be identical

Closing comment (2020-04-26T14:18:48Z): Closing as duplicate of #3.
Repository: vuejs/docs

Issue #2030: Where is Style Guide in menu?
Created: 2022-10-17T08:33:30Z
Hi,
I couldn’t find the link to “Style Guide” in the menu. I try to use search “Style Guide” using the search box, but no result is returned. As a Vue 2 user, I know it exists at https://vuejs.org/style-guide/
It seems like a mysterious page or I missed something obvious :)
Great docs by the way, thanks who wrote.
Regards,
P.S. I saw its status is outdated, but I think it should be on the menu anyway as “Style Guide (WIP)”, because new users who already read the docs, could not discover it when it is finished.

Duplicate issue #2321: [OTHERS] Can't find Vue Style Guides in Vue Website
Created: 2023-04-15T16:08:27Z
I see Vue Style Guides is a publicly accessible page (really helpful) but I cant find it anywhere in vuejs.org

Closing comment (2023-04-15T16:10:04Z): Duplicate of #2030
Repository: vuejs/docs

Issue #1927: Additional, unstyled language marker `<span class="lang>...` rendered on top left of code blocks 
Created: 2022-08-19T12:30:10Z
Is this an issue or maybe an accesibility feature? It's very high contract which makes me think it might be for accesibility. For context, the other indicator on the top right is a ::before element.

Duplicate issue #1935: Code blocks display code lang.
Created: 2022-08-26T06:59:50Z

Closing comment (2022-08-26T20:00:49Z): Duplicate of #1927
Repository: vuejs/docs

Issue #865: Code block component's language info text overlaps "New content is available" modal in top right corner
Created: 2021-02-20T23:50:08Z
As in this picture:

This is not an issue with core VuePress, as on their docs everything is normal

Duplicate issue #1265: Language indicator text in code examples overlaps with new content available dialog box.
Created: 2021-10-02T10:31:50Z
I think, you should increase z-index of the dialog box.

Closing comment (2021-10-03T15:04:58Z): Thanks for the report. I think this is a duplicate of #865.
As I recall, changing the z-index isn't as simple as it sounds because there are various other z-index values coming from third-party plugins and they'd all need overriding too.
It should be fixed when we migrate to VitePress, currently work-in-progress on the next branch.
Repository: vuejs/eslint-plugin-vue

Issue #993: Simple prop declaration replaces "" with nothing when auto-fixing
Created: 2019-11-25T12:35:43Z
Tell us about your environment

ESLint version:	v6.7.1
eslint-plugin-vue version:	v6.0.1
Node version: v12.13.0

Please show your full configuration:

{
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "plugins": [
        "vue"
    ]
}
What did you do?

<template>
  <div>
    <h1>Hello</h1>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    foo: "",
  },
};
</script>
Running eslint test.vue gives me the following:

And then after running eslint --fix test.vue

What did you expect to happen?
Not sure what I expected, but did not expect it to just replace "" with nothing, leaving the JS invalid.
What actually happened?
{
  props: {
    foo: "",
  }
}
was turned into
{
  props: {
    foo: ,
  }
}

Duplicate issue #999: Fixed an issue that caused an error when set empty string in vue/require-default-prop
Created: 2019-12-06T08:06:54Z
Tell us about your environment

ESLint version: 6.1.0
eslint-plugin-vue version: 5.2.2
Node version:10.16.0

Please show your full configuration:


What did you do?

when i run ./node_modules/.bin/eslint --fix for this following code
export default {
    props: {
        test: '',
    },
}
it will converted to this following code
export default {
    props: {
        test: ,
    },
}

What did you expect to happen?
Don't converted it
What actually happened?

Closing comment (2019-12-06T09:19:36Z): Thank you for this issue.
This is a bug, but closes because it is a duplicate of #993.
Repository: vuejs/eslint-plugin-vue

Issue #2172: Rule Proposal: `vue/no-implicit-props-access`
Created: 2023-05-14T20:33:18Z
Please describe what the rule should do:

Props can be referenced in the template using propName or props.propName. Former is convenient; latter is more explicit, provides a clear delineation between local state and props and is consistent with how props are accessed in script. Former could also feel counter-intuitive if you're using Typescript (but that's subjective).
The rule, when enabled, should flag any occurrence of implicit prop access in the template.
What category should the rule belong to?


 Enforces code style (layout)
 Warns about a potential error (problem)
 Suggests an alternate way of doing something (suggestion)
 Other (please specify:)

Provide 2-3 code examples that this rule should warn about:
  <template>
    <div>
      <!-- bad -->
      <div v-if="myProp">
        myProp: true
      </div>

      <!-- bad -->
      <div>
        myProp: {{ myProp }}
      </div>

      <!-- good -->
      <div v-if="props.myProp">
        myProp: true
      </div>

      <!-- good -->
      <div>
        myProp: {{ props.myProp }}
      </div>
    </div>
  </template>
  <script lang="ts">
    export interface Props {
      myProp: boolean;
    }
    const props = defineProps<Props>();
  </script>
Additional context

I tried to look for existing rules and proposals but couldn't find anything on this subject. If this is already possible, please let me know. Thank you.

Duplicate issue #2689: New Rule Request: Disallow access to properties by omitting props
Created: 2025-02-19T08:58:24Z
Please describe what the rule should do:

What category should the rule belong to?

[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<script setup>
const props = defineProps({
  list: Array,
});
</script>

<template>
  <div>{{ list }}</div> <!-- invalid -->
  <div>{{ props.list }}</div> <!-- valid -- >
</template>
Additional context

Closing comment (2025-02-20T08:26:35Z): Duplicate of #2172
Repository: vuejs/eslint-plugin-vue

Issue #938: [Rule proposal] Warn when referencing props without `props.` prefix in functional component template
Created: 2019-08-09T09:04:24Z
Please describe what the rule should do:
When I use functional components with templates, I very often forget to reference props through props object (props.user instead of user). This leads to a lot of lost time in debugging until I find out because there is no warning or error thrown to indicate this issue.
What category should the rule belong to?


 Enforces code style
 Warns about a potential error
 Suggests an alternate way of doing something
 Other (please specify:)

Provide 2-3 code examples that this rule should warn about:
<template functional>
  <div>{{ username }}</div>
</template>
<script>
export default {
  functional: true,
  props: {
    username: String,
  }
}
</script>
should be
<div>{{ props.username }}</div>
Additional context

Duplicate issue #2172: Rule Proposal: `vue/no-implicit-props-access`
Created: 2023-05-14T20:33:18Z
Please describe what the rule should do:

Props can be referenced in the template using propName or props.propName. Former is convenient; latter is more explicit, provides a clear delineation between local state and props and is consistent with how props are accessed in script. Former could also feel counter-intuitive if you're using Typescript (but that's subjective).
The rule, when enabled, should flag any occurrence of implicit prop access in the template.
What category should the rule belong to?


 Enforces code style (layout)
 Warns about a potential error (problem)
 Suggests an alternate way of doing something (suggestion)
 Other (please specify:)

Provide 2-3 code examples that this rule should warn about:
  <template>
    <div>
      <!-- bad -->
      <div v-if="myProp">
        myProp: true
      </div>

      <!-- bad -->
      <div>
        myProp: {{ myProp }}
      </div>

      <!-- good -->
      <div v-if="props.myProp">
        myProp: true
      </div>

      <!-- good -->
      <div>
        myProp: {{ props.myProp }}
      </div>
    </div>
  </template>
  <script lang="ts">
    export interface Props {
      myProp: boolean;
    }
    const props = defineProps<Props>();
  </script>
Additional context

I tried to look for existing rules and proposals but couldn't find anything on this subject. If this is already possible, please let me know. Thank you.

Closing comment (2023-05-16T15:25:50Z): Seems like a good rule to me. Note that it sounds similar to #938, maybe both rules can be combined into one?
Repository: vuejs/eslint-plugin-vue

Issue #118: Request to allow vue component js to optionally start at an indentation level of 1 when wrapped in <script></script>
Created: 2017-07-31T02:32:14Z
The version of ESLint you are using: v4.3.0
The version of eslint-plugin-vue you are using: 3.8.0
The problem you want to solve: Javascript in a vue component expects an initial indentation level of 0 despite being wrapped in <script></script>. The following currently reports an error:
<script>
    export default {

    };
</script>

Your take on the correct solution to problem: When modifying a vue component, the linter should optionally allow for an initial indentation level of 1 when wrapped in <script></script>.
The eslint-plugin-html plugin solves the indentation level issue for html files, and works nicely with eslint to only lint the javascript portion of vue components. Ideally eslint-plugin-vue could work in a similar way while also linting the template portion of the component (as it currently does).
Thanks!

Duplicate issue #266: Indent rule under script tag
Created: 2017-11-30T03:40:58Z
Tell us about your environment
Windows 10 x64
Webstorm 2017.2

ESLint Version: v4.12.0
eslint-plugin-vue Version:  4.0.0-beta.0
Node Version: v8.9.0

Please show your full configuration:

module.exports = {
   "env": {
      "browser": true,
      "es6": true
   },
   'plugins': ['vue'],
   'extends': [
      'airbnb-base',
      'eslint:recommended',
      'plugin:vue/recommended'
   ],
   "parserOptions": {
      'parser': 'babel-eslint',
      "sourceType": "module"
   },
   "rules": {
      "indent": [
         "error",
         3
      ],
      "linebreak-style": [
         "error",
         "windows"
      ],
      "quotes": [
         "error",
         "single"
      ],
      "semi": [
         "error",
         "always"
      ],
      "vue/max-attributes-per-line": ["error", {
         "singleline": 3,
         "multiline": {
            "max": 3,
            "allowFirstLine": true
         }
      }],
      "vue/html-indent": ["error", 3, {
         "attribute": 1,
         "closeBracket": 0,
         "ignores": []
      }]
   },
};

What did you do? Please include the actual source code causing the issue.

<script>
   export default {
      name: 'VUploader',
      props: {
      [...]


What did you expect to happen?
How I can config the indent rule to indent 3 spaces underneath the script tag? Currently it shows the below error and I must to do this:
<script>
export default {
   name: 'VUploader',
   props: {
   [...]
But I don't want to do that, it looks ugly to me. I prefer everything in first level underneath the script tag should be have the indent. Did I missing any related rules from the docs?
What actually happened? Please include the actual, raw output from ESLint.
32:1   error  Expected indentation of 0 spaces but found 3    indent

Closing comment (2017-11-30T05:33:35Z): Thank you for this issue.
It seems a duplicate of #118.
Repository: vuejs/eslint-plugin-vue

Issue #2699: Configs types are not aligned with source code
Created: 2025-03-05T08:00:13Z
Checklist

 I have tried restarting my IDE and the issue persists.
 I have read the FAQ and my problem is not listed.


Tell us about your environment

ESLint version: latest
eslint-plugin-vue version: latest
Vue version: latest
Node version: lts-latest
Operating System: macOS

Please show your full configuration:


What did you do?


What did you expect to happen?
Types are aligned with source.
What actually happened?

Types are not aligned with source.
Repository to reproduce this issue

None.
Types

  
    
      eslint-plugin-vue/lib/index.d.ts
    
    
        Lines 12 to 14
      in
      d385140
    
  
  
    

        
          
           'vue3-essential': Linter.LegacyConfig 
        

        
          
           'vue3-strongly-recommended': Linter.LegacyConfig 
        

        
          
           'vue3-recommended': Linter.LegacyConfig 
        
    
  


Source

  
    
      eslint-plugin-vue/lib/index.js
    
    
        Lines 18 to 20
      in
      d385140
    
  
  
    

        
          
           essential: require('./configs/vue3-essential'), 
        

        
          
           'strongly-recommended': require('./configs/vue3-strongly-recommended'), 
        

        
          
           recommended: require('./configs/vue3-recommended'), 
        
    
  


Prefix vue3- should be removed.

Duplicate issue #2714: the package in npm has wrong dts
Created: 2025-03-12T03:58:12Z
the dts file in npmjs

the correct dts file in code

Closing comment (2025-03-12T08:30:53Z): Duplicate of #2699.
Already fixed in #2700.
Will be fixed in the next release.
Repository: vuejs/vuex

Issue #1037: mapSetters (similar to mapGetters) for adding setters to mutations
Created: 2017-11-01T13:04:18Z
What problem does this feature solve?
There have been lots of situations where I have some variables in state that I need to assign values to. The correct way to modify the state tree is to create a mutation to set the value of the key in the state. This means a lot of repetitive code is written (as shown below):
export default {
  state: {
    name: null,
    value: 0
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    },
    setValue (state, value) {
      state.value = value;
    }
  }
};

$store.commit('setName', 'John Doe');

mapSetters will allow users to create all these setters using a single like of code.
What does the proposed API look like?
import { mapSetters } from 'vuex'

export default {
  state: {
    name: null,
    value: 0
  },
  mutations: {
    ...mapSetters(['name', 'value']),
    //...
  }
};

Usage: $store.commit('name', "John Doe") OR $store.commit('setValue', 4) depending on how it is implemented. I prefer the second approach myself.

Duplicate issue #953: Proposal: Add helpers mapStateTo{Mutation/Action} for improved form handling
Created: 2017-09-15T21:06:28Z
What problem does this feature solve?
Provides seamless form handling integration between v-model and Vuex. This allows a user to easily create two-way computed properties for Vuex object properties as outlined at the bottom of https://vuex.vuejs.org/en/forms.html. This removes alot of the verbosity of creating two-way computed properties, and allows an easier transition if someone is refactoring a component written with local Vue data   v-model, to Vuex.
(apologies ahead of time if my variable names are poorly chosen)
What does the proposed API look like?
template:
<input v-model="firstName">
<input v-model="lastName">
computed: {
   ...mapState('user', ['profile']),
   ...mapStateToMutation('user', 'updateProfile', this.profile)
}
the specified mutation updateProfile will receive a payload {property, value} anytime the setter is called.
pseudo implementation details:
function mapStateToMutation(namespace, mutationName, vuexObject){
  const twoWayComputed = {};
  const properties = /* all vuexObject own properties */
  
  properties.forEach(function(property) {
    twoWayComputed[property] = {
      get() {
        return vuexObject[property]
      },
      set(value) {
        this.$store.commit(`${nameSpace}/${mutationName}`, {property, value})
      }
    }
  })
  
  return twoWayComputed
}
This similar structure could be used for an action as well, incase a user wanted to perform async operations on update of a property. And going further, the api could be extended to allow custom get/set functions to be defined by the user.

Closing comment (2017-11-07T16:02:51Z): Similar to #1037
Repository: vuejs/vuex

Issue #2040:  DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at ...node_modules/vuex/package.json.
Created: 2021-08-15T16:58:54Z
Version
4.0.2
Reproduction link
https://none.git
Steps to reproduce
package.json
{
"name": "myproj",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"lint:script": "eslint --ext .ts,vue --ignore-path ../.gitignore --fix .",
"lint:style": "stylelint src/**/.{css,scss,vue} --fix",
"format": "prettier --write ."
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
".{ts,vue}": "eslint --fix",
".{css,scss,vue}": "stylelint --fix",
"": "prettier -write"
},
"dependencies": {
"@coreui/icons-pro": "^2.0.3",
"bootstrap": "^5.1.0",
"vue": "^3.2.2",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@types/node": "^16.4.13",
"@typescript-eslint/eslint-plugin": "^4.29.0",
"@typescript-eslint/parser": "^4.29.0",
"@vitejs/plugin-legacy": "^1.5.1",
"@vitejs/plugin-vue": "^1.4.0",
"@vitejs/plugin-vue-jsx": "^1.1.7",
"@vue/compiler-sfc": "^3.2.2",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^7.32.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.15.1",
"husky": "^7.0.1",
"lint-staged": "^11.1.2",
"prettier": "^2.3.2",
"sass": "^1.26.5",
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-standard": "^22.0.0",
"typescript": "^4.3.5",
"vite": "^2.4.4",
"vite-plugin-checker": "^0.3.4",
"vite-plugin-eslint": "^1.3.0",
"vls": "^0.7.4",
"vue-tsc": "^0.2.2"
}
}
What is expected?
no warning at startup.
What is actually happening?
per npm run dev.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)

Building out a template vite/vue3/vuex/vure-router setup...

Duplicate issue #2047: Deprecation Warning: Use of deprecated folder mapping "./" in the "exports" field module
Created: 2021-08-29T05:03:37Z
Version
4.0.2
Reproduction link
github.com
Steps to reproduce

Create Vue-CLI project including vuex and Unit Test
Run the test command: pnpm run test:unit

What is expected?
Running the test task without warning.
What is actually happening?
There is DeprecationWarning before running the test task.

Closing comment (2021-09-29T02:31:40Z): Duplicate #2040
Repository: vuejs/vuex

Issue #1267: Adjust vuex types for using state values and modules in one store
Created: 2018-05-13T19:47:16Z
Version
3.0.1
Reproduction link
https://codesandbox.io/s/14njpn10p3
Steps to reproduce

Create a project like https://codesandbox.io/s/14njpn10p3
npm run test:types

What is expected?
no type errors.
What is actually happening?
src/test.ts(46,41): error TS2345: Argument of type '{ state: { value: number; }; modules: { a: Module<AModule, RootState>; }; }' is not assignable to parameter of type 'StoreOptions'.
Types of property 'state' are incompatible.
Type '{ value: number; }' is not assignable to type 'RootState | undefined'.
Type '{ value: number; }' is not assignable to type 'RootState'.
Property 'a' is missing in type '{ value: number; }'.

Duplicate issue #1652: [vuex] state field "foo" was overridden by a module with the same name at "foo"
Created: 2019-11-28T08:51:19Z
Version
3.1.2
Reproduction link
https://gist.github.com/mspoulsen/f3a67e22a76ba124e606a0beae597974
Steps to reproduce
Create a minimal store using the gist.
Then try to access store.state.foo
Result: We get Typescript error: Property 'foo' does not exist on type 'RootState'.
What is expected?
A Typescript error is expected
What is actually happening?
We get the Typescript error and that is the problem

How would I be able to access store.state.foo without adding foo to RootState? And if I do I get this warning in 3.1.2:
[vuex] state field "foo" was overridden by a module with the same name at "foo"

Closing comment (2019-11-28T09:38:08Z): Essentially duplicate of #1267
You can add your module state in RootState and cast the root state value to any as a work around.
Repository: vuejs/vuex

Issue #1193: module onRegister, onRemove methods
Created: 2018-03-17T11:55:24Z
What problem does this feature solve?
Setup module when registerModule has been called and remove dependencies when unregisterModule. For example register database listeners and then remove them
What does the proposed API look like?
onRegister and onRemove in a module object

Duplicate issue #1222: Add module registration to complete the hook.
Created: 2018-04-10T04:58:02Z
What problem does this feature solve?
I want to develop a plug-in that uses a class to create a module, but you need a hook to bind the currently created module.
What does the proposed API look like?
new Vuex.Store({
    modules: {
        test: {
            namespaced: true,
            state: {},
            getters: {},
            mutations: {},
            actions: {},
            created (module) {
                // A module that is introduced to create the completed module.
            }
        }
    }
});
// My plug-in API
class Test extends VuexClass {
    constructor () {
        this.state = {
            count: 0
        };
        this.namespaced = true
        // ....
    }
    // mutations
    set plus (payload) { // Automatic conversion to function.
        this.state.count++;
    }
    // getters
    get text () {
        return `Count value: ${this.state.count}`
    }
    // actions
    submitPlus () {
        this.Plus(); // Function call.
    }
}

 const test = new Test();
// output: 
//  {
//     namespaced: true,
//     state: {
//         count: 0
//     },
//     getters: {
//         text () {}
//     },
//     mutations: {
//         plus () {}
//     },
//     actions: {
//         submitPlus () {}
//     },
//     create (module) {
//         this.context = module;
//         A module that is introduced to create the completed module.
//     }
//     ...
// }

new Vuex.Store({
    modules: {
        test
    }
});

Closing comment (2018-04-10T16:11:13Z): Well, then it is duplicate of #1193...
Repository: vuejs/vuex

Issue #1579: [Feature Request] mapModule
Created: 2019-07-10T08:38:57Z
What problem does this feature solve?
This made namespaced module can be use like simple vuex store.
What does the proposed API look like?
store/modules/myModule.ts
export const myModule = {
  state: {
    count: 0
  },
  mutations: {
    add(state, payload) {
      state.count = state.count   payload
    }
  }
}
lib/someLib.ts
import store from '@/store'

// the `myModule` is module path
const myModule = mapModule<IMyModule>(store, 'myModule')

console.log(myModule.state.count) // 0
myModule.commit('add', 2)
console.log(myModule.state.count) // 2

// for reuse or singleton?
export myModule

Duplicate issue #1695: Add useStoreModule
Created: 2020-03-15T14:25:10Z
What problem does this feature solve?
While I was looking through the examples of the 4.0 alpha version, I thought that when you have a large store it can become a bit annoying to declare getters and actions locally in every component you need. So I think it would be nice to have a some sort of a helper function that returns only (hopefully typed) store module you want to use.
What does the proposed API look like?
const myModule = useStoreModule("module namespace")

console.log(myModule.state) // returns state of a module etc.

Closing comment (2020-06-08T21:00:48Z): Seems like this is a duplicate of #1579.
Given how little code is required for a wrapper such as vuex-stores, and the fact that importing the store does not work correctly for cases such as SSR, I agree that it's better to leave this in userland for now.
It would be nice if Vue 5 provided some useful abstractions to avoid using namespaces directly, though.
Repository: vuejs/vuex

Issue #731: [vuex] already installed. Vue.use(Vuex) should be called only once. 
Created: 2017-04-06T15:25:45Z
Version
2.0.0
Reproduction link
https://jsfiddle.net/15ww4vog/8/
Steps to reproduce

Load jsfiddle page
Vue init method is executed.(With CDN, Just VUE and Jquery)
Vue init method makes a Ajax call to "https://api.myjson.com/bins/13xym3". and responds a HTML, JS injected to #dinamic-container div.
HTML, JS injected also includes a Vue instance.
creating conflicts "[vuex] already installed. Vue.use(Vuex) should be called only once."

What is expected?

Load page, instantiate VUE.
When a page is injected and includes a VUE instance. load with no conflicts.

What is actually happening?

Load page, instantiate VUE.
When page is injected and includes a VUE instance. a conflict is raised and show the "[vuex] already installed. Vue.use(Vuex) should be called only once." console error.


My parent view is loading Vue instance.
and I'm injecting a Child view that also contains its own Vue instance.

Duplicate issue #900: Can I disable auto install in dist mode if I'm loading vuex from a packaged bundle? 
Created: 2017-08-04T16:47:48Z
What problem does this feature solve?
I'm creating an embedded js app that needs to be isolated from what ever version or Vue/Vuex tools the webpage owner is using. When I call Vuex, it tries to install itself into the window.Vue when I don't need it to, because I'm already importing Vue
What does the proposed API look like?
Not really sure. I end up just hacking the vuex.esm.js file
Maybe a separate package for dist and package bundles

Closing comment (2017-08-04T22:07:33Z): dup of #731
Repository: vuejs/vuex

Issue #459: mapState alias for child state?
Created: 2016-11-15T14:45:06Z
The mapState alias supports one-level only.
Can we support the child state with the alias like this:
computed: mapState
({
    screen: 'homepage.screen'
})

Instead of doing this?
computed: mapState
({
    screen: state => state.homepage.screen
})

Duplicate issue #1596: Improve modules data map import
Created: 2019-08-06T13:34:41Z
What problem does this feature solve?
Repeating code, Safe import, More convenient way to import data
What does the proposed API look like?
Hi, I've been working with Vuex recently and got a task where I would need to get a property of the object from the state.
Like this: state.headers.username
What do you think to implement this solution for importing this property from the state (it also could be done for actions, getters, mutations):
...mapState({ username: 'collection-data/headers.username' })

What do you think about it?

Closing comment (2019-11-09T07:05:31Z): Duplicate of #459
Repository: vuejs/vuex

Issue #439: Does Vuex work with new Map(), as in key/value map lists?
Created: 2016-11-03T05:59:14Z
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
My state for a module looks like this:
const state = {
	loaded: false,
	items: new Map(),
}
I'm having some issues when updating an item in the list through a mutation, that it doesn't propagate through to the Vue component.  In the component I have:
computed: {
	item() {
		return this.$store.state.module.items.get(this.pk)
	},
},
Am I using this wrong, or does Vuex not support Map()?  If it's not supported, where would be a good place to put a load(pk) method?

Duplicate issue #1063: Support Set object in Vuex
Created: 2017-11-22T09:34:53Z
What problem does this feature solve?
Set object are very useful in situations where uniqueness is required. In my opinion it is cleaner to use Set instead object literals with values set to true
var state = {
  items: new Set()
}
var mutations = {
  newItem(state, item) {
    // state.items = { ...state.items, item: true }  // -- works but it is kinda hack
    // state.items = new Set([...state.items, item]) // -- this works correctly but is messy
    
    state.items.add(item) // -- it seems to not observe changes through add method.
  }
}
Link to sandbox with this example  https://codesandbox.io/s/03w04xjq4p
What does the proposed API look like?
No extra API is needed. Observe changes through native Set methods add and delete

Closing comment (2017-11-22T10:00:26Z): This is essentially duplicate of #439 and #471.
And there are nothing we can do for this in Vuex since it just use Vue's reactivity system.
Repository: vuejs/vuex

Issue #1219: Feature Request: watch
Created: 2018-04-08T13:13:40Z
What problem does this feature solve?
This solve doing
store.watch multiple times
for example
store.watch multiple getter functions
What does the proposed API look like?
when declaring a vuex store or module add a watch option on it
Vuex.store({
  watch: {
    'getters.auth': {
       mutation: 'test',
       action: 'test',
       deep: true,
       immediate: true
     }
  }
})
Just the same idea with Vue JS API
https://vuejs.org/v2/api/#watch

Duplicate issue #1624: Watchers should be a core concept of Vuex
Created: 2019-10-03T23:12:55Z
What problem does this feature solve?
This will make the flow of vuex, that is already very intuitive, more easier.
What does the proposed API look like?
In the analogy of component vs vuex:
data => state,
methods => mutations and actions ,
computed properties => getters,
watchers => watchers

The users will not have to use store.$watch, they will create watchers in the Vuex.Store and in modules directly.
The good news is that it will not destroy any existant flow, will only increase a feature that will help the flow of vuex.
This is the model of a module of vuex with watchers:
const state = {};
const getters = {};
const mutations = {};
const actions = {};
const watchers = {};

export default {
    namespaced: true,
	state,
	getters,
	mutations,
	actions,
	watchers,
}

Closing comment (2019-11-09T08:20:50Z): Duplicate of #1219
Repository: vuejs/vuex

Issue #1571: Actions mapped to namespaced modules pass unexpected explicit `undefined` payload to `store.dispatch`
Created: 2019-06-26T11:34:51Z
Version
3.1.1
Reproduction link
https://codepen.io/markrian/pen/vqeGZZ?editors=0010
Steps to reproduce

Open https://codepen.io/markrian/pen/vqeGZZ?editors=0010
Open the browser's console
Observe the differing logged arguments passed to store.dispatch depending on whether it's a root-mapped action or a namespace-mapped action ([ "foo" ] and [ "childModule/foo", undefined ] respectively - note the extra undefined argument in the second case; the different action name is of course expected)

Note that this only really applies in a testing scenario, where the test spies on store.dispatch to ensure the component dispatches the expected actions.
What is expected?
store.dispatch receives exactly the same arguments regardless of whether the actions are namespace-mapped or not.
What is actually happening?
store.dispatch receives a payload argument of undefined for namespace-mapped actions.

I encountered this when refactoring a store into a namespaced module, and found that my expectations needed to change: that store.dispatch received an extra undefined argument.
I'm not sure if this should be considered a bug in Vuex, or in my testing approach of spying on store.dispatch 🤷‍♂️

Duplicate issue #1618: The third parameter of dispatch is undefined.
Created: 2019-09-20T08:03:15Z
Version
3.1.1
Reproduction link
https://codesandbox.io/s/vue-template-4fv3d
Steps to reproduce

go to link;
open Console of page in the bottom;
see the undefined;

What is expected?
In theory,it should show the code of cb.
What is actually happening?
In fact,it's undefined.

According to Vuex code, wrappedActionHandler function provide two params.One is payload,the other is cb.
  // notice the cb
  entry.push(function wrappedActionHandler (payload, cb) {
    let res = handler.call(store, {
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb) // pass it and do nothing
    if (!isPromise(res)) {
      res = Promise.resolve(res)
    }
    if (store._devtoolHook) {
      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err)
        throw err
      })
    } else {
      return res
    }
  })

  // dispatch function only use payload
  dispatch (_type, _payload) {
    // check object-style dispatch
    const {
      type,
      payload
    } = unifyObjectStyle(_type, _payload)

    const action = { type, payload }
    const entry = this._actions[type]
    // ...
    const result = entry.length > 1
      ? Promise.all(entry.map(handler => handler(payload))) // only payload parameter
      : entry[0](payload)
  }
So I think cb parameter is useless and it should be delete from code in order to
eliminate misunderstanding.

Closing comment (2019-10-30T09:16:10Z): This may be a duplicate of #1571.
Repository: vuematerial/vue-material

Issue #1794: [MdDatepicker] Positioning error when placeing the datepicker into an dynamic layout item
Created: 2018-06-01T08:56:41Z
Steps to reproduce
I've placed the datepicker into a responsive formular. The dom element that contains the datepicker has an dynamic percentage width value (like md-large-size-15 or style="width:15%;": The percentage value triggers this issue). When the datepicker dialog will be rendered, the top position will be set on "top: -149px;" and outside the viewport. This issue only exists in version 1.0.0-beta-10.x. In version  1.0.0-beta-8 the datepicker is placed correctly.
You can see the behavior in my CodeSandbox link below.
Which browser?
This can be reproduced with latest version of Vue (2.5.16), Vue-Material 1.0.0-beta-10.2.
Tested in the following Broswers: Google Chrome (Version 66.0.3359.117), latest Safari
What is expected?
The initial calculated height value for the MdDatepickerDialog is wrong. The "setContentStyles" uses the element.offsetHeight value. This value changes after the transition is completed. If the transition hook is changed from @Enter to @after-enter the issue is solved. But than the height of the displayed dialog ist to small.
What is actually happening?
The popper.js calculates a wrong top position. The element is placed outside the viewport and expands to the bottom of the viewport: See the CodeSandbox link below.
Reproduction Link
https://codesandbox.io/s/2wro15pjmy

Duplicate issue #1811: [MdDatePicker] Dialog stretches out of the page.
Created: 2018-06-08T15:25:24Z
When you add a Datepicker component to a Drawer the Datepicker dialog stretches out of the page. If you cancel the dialog and try to open the Datepicker again it won't be visible again. This happens only when its included in a Drawer but when its added directly to a page it works fine without any issues.
This issue has popped up after the 1.0-beta-10 release. It was working fine with the 1.0-beta-8 release. The problem seems to be with values of the top and height attributes set to the Datepicker.

Please check this code pen https://codepen.io/zapping/pen/gKLePd . Do click on the menu icon to open the Drawer which has a Datepicker component.

Closing comment (2018-06-11T12:18:34Z): Duplicate of #1794
Repository: vuematerial/vue-material

Issue #2277: vue@3 support
Created: 2020-09-18T17:16:39Z
Would be nice to support Vue 3 :)

Duplicate issue #2389: Plan To Support Vue3?
Created: 2023-03-09T02:24:03Z
This is not an issue but just wanted to ask if there is a plan for supporting vue3.

Closing comment (2023-03-11T10:01:55Z): Duplicate of #2277
Repository: vuematerial/vue-material

Issue #547:  [mdSelect] in a md-dialog scrolling issue
Created: 2017-02-22T03:30:10Z
Steps to reproduce
open dialog
open select menu
scroll to bottom and keep scrolling with PgDown,or a scroll mouse wheel, or 2 finger scroll on touch pad
select window keeps scrolling with page, while dialog stays fixed in middle of screen
Which browser?
Chrome
What is expected?
Scrolling to the bottom of the select menu in the dialog window would finish the scrolling window and then stop, rather than let the page scroll. This might be a difference between position: absolute and position: fixed. You can see the FAB has to be updated to position:fixed, because otherwise the button would scroll with the page.
What is actually happening?
When opening the select menu, and scrolling to the bottom, the scroll option window keeps: scrolling to the top with the back page, while the modal dialog window stays fixed in the middle of the screen.
Reproduction Link
http://codepen.io/anon/pen/GWKRqR

Duplicate issue #738:  [mdSelect] in a modal
Created: 2017-05-10T11:20:09Z
Hi!
i'm trying to add a md-select in a modal. Every time i try, it appends the select-options to the body, and is behind the modal and it scrolls with the body.
How can i get it to append to the modal instead of the body?

Closing comment (2017-06-12T16:42:09Z): This looks the same as #547
Repository: vuematerial/vue-material

Issue #1977: vue-router v3.0.2 causes MdRouterLinkProps to fail
Created: 2018-11-26T16:11:10Z
After updating vue-router to version 3.0.2 a utility  MdRouterLinkProps fails. I don't invoke it directly but it is used somewhere internally.
I found the reason: router-link is now registered with a name in a Pascal case, whereas here it is expected to be in kebab case. See these changes https://github.com/vuejs/vue-router/pull/1842/files.
Possible workaround:
Vue.use(VueRouter);

Vue.component('router-link', Vue.options.components.RouterLink);
Vue.component('router-view', Vue.options.components.RouterView);

Duplicate issue #1988: md-list-item vue router BUG
Created: 2019-01-06T23:16:01Z
While Trying to use the "to=" option in vue-material I have the following error :
TypeError: "context.$options.components['router-link'] is undefined"

Steps to reproduce

 Home


Which browser?
Firefox and Chrome latest version to date
What is expected?
A link

What is actually happening?
TypeError: "context.$options.components['router-link'] is undefined"

Reproduction Link

Closing comment (2019-01-29T09:32:02Z): Duplicate of #1977
Repository: vuematerial/vue-material

Issue #1422: [MdDatepicker] Dates are reversed in Safari
Created: 2018-01-22T12:19:28Z
Steps to reproduce
Go to https://vuematerial.io/components/datepicker
using Safari

Which browser?
Safari on Osx Version 11.0.2 (12604.4.7.1.6)

What is expected?
Date format should be dd/mm/yyyy

What is actually happening?
Date format is yyyy-mm-dd

Duplicate issue #1602: [MdDatepicker] typing broken as of 1.0.0-beta-8
Created: 2018-03-14T02:44:48Z
Steps to reproduce

Which browser?

What is expected?

What is actually happening?

Reproduction Link


In 1.0.0-beta-7, you could use the keyboard to input a date in the format YYYY-MM-DD.
In 1.0.0-beta-8, this method of input has become extremely clunky with the datepicker aggressively filling up the date.
Random fact: The way the remaining numbers are filled up are different for Chrome and Firefox (the 2 browsers I have on my machine)
(Sorry for the random letters at the end, I just got really frustrated at the datepicker)

Closing comment (2018-03-25T18:03:43Z): Being able to type in dates is very important for data entry, so glad you are looking into this! When addressing this you may need to take into account the dateformat used in the current locale, similar to  #1422
Repository: vuematerial/vue-material

Issue #1243: [MdAutocomplete] options with objects.
Created: 2017-12-01T18:16:12Z
As #1215, I fixed by #1218 to make searchTerm sync with v-model, but that also make it crash while the options are objects. It's could reproduce in documentation example Custom Template - With highlight text with 6f51eb9 (and it's a bug now in beta 6). If I want to make #1215 support object, I should know what to show as searchTerm. I think it's not easy because MdAutocomplete get the plain text via Node.textContent.
As #1241, I think users prefer that the result is the thing shown on the searchTerm not the thing they select via autocomplete. It's good if I could still get the object while I type the searchTerm and match a statement.
To sum up, I want to figure out a way to bind the option object and the plain text for the object.
Another issue is that MdIcon cannot be used in md-autocomplete-item slots or the searchTerm will show the text in MdIcon after selected.
Any idea?

Duplicate issue #1693: [MdAutocomplete] options with Objects doesn't display selected value
Created: 2018-04-26T11:50:46Z
Steps to reproduce
Autocomplete component, Async Options section example

Which browser?
Chrome
What is expected?
After selecting autocomplete value, input should display needed object attribute
What is actually happening?
After selecting autocomplete value, input displays "[object Object]"

Reproduction Link
Autocomplete component, Async Options section example

Closing comment (2018-04-26T11:53:23Z): Duplicate of #1243
Repository: vuematerial/vue-material

Issue #1357: [MdSelect] position
Created: 2017-12-29T08:50:47Z
Steps to reproduce
the website offical website
select the last of "font“ option ,after select again,the pop of option will go up
Which browser?
chrome
What is expected?
the position of options should be fixed
What is actually happening?

pop of options show the selected option position

Duplicate issue #1377: md-select scroll box popup is misaligned when selected item is towards bottom of list
Created: 2018-01-05T17:27:32Z
Steps to reproduce
Have an md-select somewhere not at the top of a page. Have a long md-select list and select an item near the bottom.
Which browser?
Google Chrome Version 63.0.3239.108 (Official Build) (64-bit)
What is expected?
I'd expect the scroll box to pop up with selected item aligned (just like what happens when items near the top of the list are selected).
What is actually happening?
The scroll box is misaligned vertically, and the selected item is not visible.
Reproduction Link
https://codepen.io/anon/pen/QaqeMN

Closing comment (2018-01-05T17:34:02Z): Found duplicate #1357
Repository: vuematerial/vue-material

Issue #375: Do we have VUE CLI show casing marcosmoura/vue material framework?
Created: 2017-01-22T04:18:29Z
This framework is freaking awesome, but it is nicer to have dedicated VUE CLI using marcosmoura/vue material framework.

Duplicate issue #428: Would be nice to have a template demo
Created: 2017-02-02T12:26:24Z
Just a feature template request.  Would be nice to have vue-material template that looks like the material design lite.
https://getmdl.io/templates/dashboard/index.html

Closing comment (2017-02-02T13:09:50Z): Related to #375 #404
Repository: vuematerial/vue-material

Issue #930: Using md-autocomplete logs lots of warnings about "Avoid using non-primitive value as key, use string/number value instead"
Created: 2017-07-29T01:11:41Z
Steps to reproduce
Just use an md-autocomplete element and give it some data to search through. In development mode, at least, Vue will look repeated warnings saying, "Avoid using non-primitive value as key, use string/number value instead".
Which browser?

Using Chrome 59, Vue 2.4.1, and Vue Material 0.7.4
What is expected?
No warnings logged
What is actually happening?
I think this is because the option object is used as the key. This could be fixed either by using item[printAttribute] as the key (it seems reasonable to assume that there wouldn't be multiple items with the same display value), by providing a keyAttribute prop, or by using the index of the iteration as the index.

Duplicate issue #1005: [md-autocomplete] Avoid using non-primitive value as key, use string/number value instead.
Created: 2017-08-29T09:57:01Z
Hello,
i have an error when i use md-autocomplete and passing an array of object to the filter-list property of md-autocomplete
<md-autocomplete :min-chars="3" v-model="searchAgenciesQuery" :list="agencies" :filter-list="filteredAgencies"></md-autocomplete>

Avoid using non-primitive value as key, use string/number value instead.

It will be fixed to be less restrictive ? Or we have to be pass string key of our object we use ?
Thank you

Closing comment (2017-08-29T12:49:30Z): oups , similar to #930
Repository: vuematerial/vue-material

Issue #1149: [md-select] Select is behind dialog
Created: 2017-11-16T19:03:01Z
Version: Beta 1.0.4/1.0.3

This seems to fix it:
.md-menu-content {
  z-index: 10;
}

Duplicate issue #1421: z-index in dialog
Created: 2018-01-22T09:05:32Z
Steps to reproduce
Open the dialog, open the drop-down menu of the select inside the dialog

Which browser?
chrome 63.0.3239.132

What is expected?
The drop-down menu of the select inside the dialog box will be above the dialog

What is actually happening?
drop-down menu of the select within the dialog, under the dialog

Closing comment (2018-01-22T09:28:04Z): Please first search in issues, then create new issue. Duplicate of #1149