vue-setup

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Vue tutorial: Carbon packages to install

To set up Carbon with Vue, install three packages: carbon-components (component styles), @carbon/vue (Vue components), and @carbon/icons-vue (Vue icons). Install them with: yarn add carbon-components @carbon/vue @carbon/icons-vue

Vue tutorial: SASS_PATH environment variable configuration

To avoid having to add the ~ prefix when importing SCSS files from node_modules, create a .env file at the project root containing SASS_PATH="node_modules". For Windows, use SASS_PATH=./node_modules instead. Restart the dev server for the new environment variable to take effect.

Vue tutorial: Import Carbon component styles

In the src directory, create a subdirectory styles and add a file _carbon.scss. In that file, import Carbon styles with: @import 'carbon-components/scss/globals/scss/styles'; Then in App.vue, update the style tag to import it with: @import "./styles/carbon";

Vue tutorial: Register all Carbon components globally

In src/main.js, after other imports and before the Vue instance is created, add: import CarbonComponentsVue from "@carbon/vue"; Vue.use(CarbonComponentsVue); This registers all @carbon/vue components for use throughout the project.

Vue tutorial: Import individual Carbon components

Instead of registering all components globally in main.js, individual components can be imported directly into specific files. For example, in a component file: import { CvButton } from '@carbon/vue'; export default { components: { CvButton } };

Vue component tag format options

Carbon Vue components can be used with either Pascal case (CvButton) or kebab case (cv-button) tag formats. The Vue style guide recommends sticking to one consistently, either Pascal or kebab case.

Vue router: Lazy loading pages with code splitting

In vue-router configuration, pages can be lazily loaded using dynamic import syntax: component: () => import(/* webpackChunkName: "repo-page" */ './views/RepoPage'). This generates a separate chunk that loads only when the route is visited, improving initial load time.

Vue tutorial: Component export pattern with index.js

For Vue components, create a folder for each component with an index.js file that imports and exports the component. For example, in src/components/TutorialHeader/index.js: import TutorialHeader from './TutorialHeader'; export default TutorialHeader; This allows shorter import paths and provides a location for tests or documentation.

Give your agent this brain