lmiller1990 / design-patterns-for-vuejs-source-code Goto Github PK
View Code? Open in Web Editor NEWSoure code for my book "Design Patterns for Vue.js": https://lachlan-miller.me/design-patterns-for-vuejs
Soure code for my book "Design Patterns for Vue.js": https://lachlan-miller.me/design-patterns-for-vuejs
Hello Miller, recently I read your book and found it particular helpful for expanding my testing knowledge. And I really like the fact that at the end of each chapter there are exercises to practice writing some codes.
But as I browsed through the repo, I only found the final source code and solution on master branch. Is there any branch that only has the initial code as in the book so that your readers can start doing the exercises right away without having to look at solution beforehand?
Hi I watched your video on youtube, it help a lot. But i have some issues.
TabContainer work well like this.
<TabContainer v-model="activeTab">
<TabHeader tab-id="1"> tab1 </TabHeader>
<TabHeader tab-id="2"> tab2 </TabHeader>
<TabHeader tab-id="3"> tab3 </TabHeader>
<TabContent tab-id="1"> content 1 </TabContent>
<TabContent tab-id="2"> content 2 </TabContent>
<TabContent tab-id="3"> content 3 </TabContent>
</TabContainer>
if i have many tabs i want to use v-for like this:
<TabContainer v-model="activeTab">
<TabHeader :tab-id="item" v-for="(item, index) in ['1', '2', '3']" :key="index">
tab{{ item }}
</TabHeader>
<TabContent tab-id="1"> content 1 </TabContent>
<TabContent tab-id="2"> content 2 </TabContent>
<TabContent tab-id="3"> content 3 </TabContent>
</TabContainer>
this first ele is Symbol(Fragment),the slots I actually need is in Symbol(Fragment) children. It does not work as except.
How can i fix it in a nice way?
Hi @lmiller1990 !
Currently reading your book Design Patterns for Vue.JS
, very interesting read so far!
I wanted to have a go at the examples in the book. Unfortunately, they have stopped working. I have tried a fresh clone, but keep receiving the same error when running yarn vite
.
[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "vue-router" from "node_modules/@testing-library/vue/dist/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
macOS Big Sur
Node: v14.15.1
Yarn: 1.22.10
Do you have any idea how to fix this?
I have tried clearing the cache already using: yarn cache clean
. Removing all node_modules
and tried re-installing - to no avail.
I'm trying to make use of the useStore example in the provide-inject
folder, but the useStore
import returns undefined, so the getState
and addUser
methods are not available either.
I'm not sure how to solve this myself, so hopefully you can help with this!
Hi @Duncank - I bought your book and am trying to write my own tests in my own Vue3 app, but keep running into the same issue. A Google search isn't helping much. Do you have any ideas on how to fix this?
The error is:
$ yarn test:unit
yarn run v1.22.5
$ vue-cli-service test:unit
(node:4177) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
FAIL tests/unit/pages/Profile/Profile.spec.js
โ renders stored display name
[vuex] getters should be function but "getters.dashboardUrl" is "/user//dashboard".
13 | // },
14 | // }
> 15 | return render(Profile, {
| ^
16 | // global: {
17 | // provide: {
18 | // languages: { 'en_us.UTF-8': {} },
at assert (node_modules/vuex/dist/vuex.cjs.js:111:27)
at node_modules/vuex/dist/vuex.cjs.js:325:7
at node_modules/vuex/dist/vuex.cjs.js:99:52
at Array.forEach (<anonymous>)
at forEachValue (node_modules/vuex/dist/vuex.cjs.js:99:20)
at node_modules/vuex/dist/vuex.cjs.js:324:5
at Array.forEach (<anonymous>)
at assertRawModule (node_modules/vuex/dist/vuex.cjs.js:319:28)
at ModuleCollection.register (node_modules/vuex/dist/vuex.cjs.js:220:5)
at new ModuleCollection (node_modules/vuex/dist/vuex.cjs.js:194:8)
at new Store (node_modules/vuex/dist/vuex.cjs.js:364:19)
at createStore (node_modules/vuex/dist/vuex.cjs.js:343:10)
at render (node_modules/@testing-library/vue/dist/index.js:69:18)
at renderProfile (tests/unit/pages/Profile/Profile.spec.js:15:10)
at Object.<anonymous> (tests/unit/pages/Profile/Profile.spec.js:28:25)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 12 passed, 13 total
Snapshots: 0 total
Time: 2.062s, estimated 4s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Store looks like:
import { createStore } from 'vuex';
import { actions } from './actions.js'
import { getters } from './getters.js'
import { mutations } from './mutations.js'
const state = () => {
const session = {}
return {
session,
}
}
export const store = createStore({
state,
mutations,
actions,
getters,
})
And 'getters' looks like:
export const getters = {
dashboardUrl(state) {
return '/user//dashboard'
}
}
My "package.json" looks like:
{
"name": "exp01",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@material/checkbox": "^9.0.0",
"@material/data-table": "^9.0.0",
"core-js": "^3.6.5",
"date-fns": "^2.16.1",
"emitter-io": "^1.39.0",
"jsrsasign": "^10.1.5",
"node-notifier": "^8.0.1",
"uuid": "^8.3.2",
"vue": "^3.0.5",
"vue-router": "^4.0.0-0",
"vue3-editor": "^0.1.0-alpha.3",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@testing-library/vue": "^6.3.4",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.5",
"@vue/test-utils": "^2.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
}
}
Can you update the examples to use Pinia?
Hi, i found some typos in the book. Is there a way to point them effectively like a pr?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.