CLI Vue prototypes

This package can be used for Vue projects.

Package name

@magnolia/cli-vue-prototypes

Repository link

@magnolia/cli-vue-prototypes

Latest version

Magnolia CLI vue prorotypes latest version tag

Changelog link

CHANGELOG.md

Prototypes in the package

For more details, click the prototype name.

Example usage

To see how to set and use the @magnolia/cli-vue-prototypes, you can jumpstart a project based on the headless/vue-demo/ce template.

Jumpstart a new project based on the template.

npx @magnolia/cli jumpstart -t "headless/vue-demo/ce"

The command downloads and creates a new project.

The mgnl.config.js file created:

import CreatePagePlugin from "@magnolia/cli-create-page-plugin";
import CreateComponentPlugin from "@magnolia/cli-create-component-plugin";
...

export default {
  ...
  plugins: [
    new CreatePagePlugin({
      pagesSpaPath: './spa/vue-minimal/src/pages',
      framework: '@magnolia/cli-vue-prototypes@1', (1)
      prototype: 'basic' (2)
    }),
    new CreateComponentPlugin({
      componentsSpaPath: './spa/vue-minimal/src/components', (1)
      framework: '@magnolia/cli-vue-prototypes@1', (2)
      prototype: 'basic'
    }),
    ...
  ],
  type: "vue",
  lightModulesPath: "./magnolia/light-modules",
  lightModule: "vue-minimal-lm",
  componentMappingFilePath: "./spa/vue-minimal/src/magnolia.config.js"
};

1	The framework prototypes package.
2	The prototype available in the framework prototypes package chosen.

Create a new page.
```
npm run mgnl -- create-page main
```

Files created:

/<project-path>/magnolia/light-modules/vue-minimal-lm/dialogs/pages/main.yaml

Click to expand or collapse

label: Page Properties
form:
  properties:
    title:
      label: Title
      $type: textField
      i18n: true

/<project-path>/magnolia/light-modules/vue-minimal-lm/templates/pages/main.yaml

Click to expand or collapse

renderType: spa
class: info.magnolia.rendering.spa.renderer.SpaRenderableDefinition

title: main
dialog: vue-minimal-lm:pages/main
baseUrl: http://localhost:3000
routeTemplate: '/{language}{{@path}}'
# templateScript: /vue-minimal-lm/webresources/dist/index.html

areas:
  main:
    title: Main Area

  extras:
    title: Extras Area

/<project-path>/spa/vue-minimal/src/pages/main.vue

Click to expand or collapse

<template>
    <div class="main">
        <h1>{{ title || metadata['@name'] }}</h1>

        <main>
            <div>[Main Area]</div>
            <EditableArea v-if="main" v-bind:content="main" />
        </main>

        <div>
            <div>[Extras Area]</div>
            <EditableArea v-if="extras" v-bind:content="extras" />
        </div>
    </div>
</template>

<script>
    import { EditableArea } from '@magnolia/vue-editor';

    export default {
        name: 'main',
        components: {
            EditableArea
        },
        props: ['title', 'metadata', 'main', 'extras']
    };
</script>

The modified file with the componentMapping object:

/<project-path>/spa/vue-minimal/src/magnolia.config.js

Click to expand or collapse

import mainPage from './pages/main.vue'
...

const config = {
  componentMappings: {
    ...
    "vue-minimal-lm:pages/main": mainPage
  }
};

export default config;

Create a new component and make it available in the main page created before.
```
npm run mgnl -- create-component hero -a main
```
Files created:
- /<project-path>/magnolia/light-modules/vue-minimal-lm/dialogs/components/hero.yaml
  
  Click to expand or collapse
  label: hero form: properties: text: label: hero Text $type: textField i18n: true
- /<project-path>/magnolia/light-modules/vue-minimal-lm/templates/components/hero.yaml
  
  Click to expand or collapse
  title: hero dialog: vue-minimal-lm:components/hero
- /<project-path>/spa/vue-minimal/src/components/hero.vue
  
  Click to expand or collapse
  <template> <h2>{{ text }}</h2> </template> <script> export default { name: 'hero', props: ['text'] }; </script>
The modified main page file:
- /<project-path>/magnolia/light-modules/vue-minimal-lm/templates/pages/main.yaml
  
  Click to expand or collapse
  ... areas: main: title: Main Area availableComponents: hero: id: vue-minimal-lm:components/hero ...

The modified file with the componentMapping object:

/<project-path>/spa/vue-minimal/src/magnolia.config.js

Click to expand or collapse

import heroComponent from './components/hero.vue'
...

const config = {
  componentMappings: {
    ...
    "vue-minimal-lm:components/hero": heroComponent
  }
};

export default config;

CLI Vue prototypes

Prototypes in the package

Example usage

Location

Main doc sections