1"use strict";(self.webpackChunkstryker_mutator_github_io=self.webpackChunkstryker_mutator_github_io||[]).push([["8042"],{76426:function(e,t,r){r.r(t),r.d(t,{metadata:function(){return s},default:function(){return d},frontMatter:function(){return o},contentTitle:function(){return u},toc:function(){return a},assets:function(){return c}});var s=JSON.parse('{"id":"stryker-js/guides/vuejs","title":"VueJS","description":"Stryker supports Vue projects. It can mutate both your js/ts files as the script tags in your *.vue files.","source":"@site/docs/stryker-js/guides/vuejs.md","sourceDirName":"stryker-js/guides","slug":"/stryker-js/guides/vuejs","permalink":"/docs/stryker-js/guides/vuejs","draft":false,"unlisted":false,"editUrl":"https://github.com/stryker-mutator/stryker-js/edit/master/docs/guides/vuejs.md","tags":[],"version":"current","frontMatter":{"title":"VueJS","custom_edit_url":"https://github.com/stryker-mutator/stryker-js/edit/master/docs/guides/vuejs.md"},"sidebar":"docs","previous":{"title":"Svelte","permalink":"/docs/stryker-js/guides/svelte"},"next":{"title":"Create a plugin","permalink":"/docs/stryker-js/guides/create-a-plugin"}}'),n=r(91987),i=r(67008);let o={title:"VueJS",custom_edit_url:"https://github.com/stryker-mutator/stryker-js/edit/master/docs/guides/vuejs.md"},u,c={},a=[{value:"Vitest configuration",id:"vitest-configuration",level:2}];function l(e){let t={a:"a",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Stryker supports Vue projects. It can mutate both your js/ts files as the script tags in your ",(0,n.jsx)(t.code,{children:"*.vue"})," files."]}),"\n",(0,n.jsxs)(t.p,{children:["This article will explain how to configure Stryker with ",(0,n.jsx)(t.a,{href:"https://vuejs.org/guide/quick-start.html",children:"vue"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["To get started using Stryker with vue, first install the core package: ",(0,n.jsx)(t.code,{children:"npm i -D @stryker-mutator/core"})," or ",(0,n.jsx)(t.code,{children:"yarn add --dev @stryker-mutator/core"}),". Next follow the guide for the Vitest runner."]}),"\n",(0,n.jsx)(t.p,{children:"Keep in mind that you may have to change some configuration settings such as paths to files."}),"\n",(0,n.jsx)(t.h2,{id:"vitest-configuration",children:"Vitest configuration"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["Install the ",(0,n.jsx)(t.code,{children:"@stryker-mutator/vitest-runner"})," plugin: ",(0,n.jsx)(t.code,{children:"npm i -D @stryker-mutator/vitest-runner"})," or ",(0,n.jsx)(t.code,{children:"yarn add --dev @stryker-mutator/vitest-runner"}),"."]}),"\n",(0,n.jsxs)(t.li,{children:['Create a "stryker.config.json" file that looks like this:',"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-json",children:'{\n "$schema": "./node_modules/@stryker-mutator/core/schema/stryker-schema.json",\n "testRunner": "vitest",\n "plugins": ["@stryker-mutator/vitest-runner"]\n}\n'})}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["Add this script to your package.json:","\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test:mutation": "stryker run"\n }\n}\n'})}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Now give it a go with ",(0,n.jsx)(t.code,{children:"npm run test:mutation"})," or ",(0,n.jsx)(t.code,{children:"yarn test:mutation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["Please take a look at the ",(0,n.jsx)(t.a,{href:"/docs/stryker-js/troubleshooting",children:"troubleshooting page"})," when you run into any problems setting up StrykerJS."]})]})}function d(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},67008:function(e,t,r){r.d(t,{R:function(){return o},x:function(){return u}});var s=r(71763);let n={},i=s.createContext(n);function o(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function u(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.