The type of this.previousPieceSelected is inferred from the initial state, and it’s currently initialized to undefined, so it thus has a type of undefined (meaning it can only be assigned a value of undefined). Use type assertion on the initial undefined value (i.e., the as keyword plus the desired type of Piece | undefined). Also … Read more
Arguably, the error message could be improved on this one. The error was caused by trying to iterate through a non-iterable (in your case undefined), using v-for. Specifically, before the call made in mount() returns, product.product_images is undefined, because you initiate product as empty object. Vue 2 style solutions instantiate product.product_image as iterable: //… data: … Read more
try it. <script lang=”tsx” setup> import { h } from ‘vue’; const render = () => { return h(‘div’, []); }; const jsxNode = () => { return <div> text </div>; }; </script> <template> <render /> <jsxNode /> </template>
Registering components in the root component’s components option doesn’t make them global. Doing that just makes them available to the root component itself, not its children. To register components globally, use app.component in your top-level code: main.js import { createApp } from ‘vue’; import App from ‘./App.vue’; import MyGlobalComponent from ‘./components/MyGlobalComponent.vue’; const app = createApp(App); … Read more
You can use Object.assign: setup() { const initialState = { name: “”, lastName: “”, email: “” }; const form = reactive({ …initialState }); function resetForm() { Object.assign(form, initialState); } function setForm() { Object.assign(form, { name: “John”, lastName: “Doe”, email: “[email protected]” }); } return { form, setForm, resetForm }; } See it live on codesandbox credits: … Read more
Update 2023-03-20: Vite supports HTML Env replacement out of the box starting with version 4.2! So if that’s all you’re looking for, you should be set. Older answer: Wanted to do the same for a project. Used vite-plugin-html for a bit, but I ran into an issue with the plugin and the author of the … Read more
In short, Pinia’s API is much simpler and intuitive. It makes using stores a breeze, even for junior devs. It brings the benefits of Composition API, but has a structure which greatly resembles the Options API, which you’re probably familiar with: has a reactive state, equivalent of data function in Options API has getters, equivalent … Read more
Vite is a litte bit different import { defineConfig } from ‘vite’ export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: ` @import “./src/styles/_animations.scss”; @import “./src/styles/_variables.scss”; @import “./src/styles/_mixins.scss”; @import “./src/styles/_helpers.scss”; ` } } } })
You just have to specify the aliases in your vitest.config.js file: import path from ‘path’ import vue from ‘@vitejs/plugin-vue’ export default { plugins: [vue()], test: { globals: true, environment: ‘jsdom’, }, resolve: { alias: { ‘@’: path.resolve(__dirname, ‘./src’) }, }, }
Catch all routes (/*) must now be defined using a parameter with a custom regex: /:catchAll(.*) For example: { // path: “*”, path: “/:catchAll(.*)”, name: “NotFound”, component: PageNotFound, meta: { requiresAuth: false } }