npm i @teleporthq/teleport-component-generator-vue

71 Versions


1 month ago


1 month ago


1 month ago


2 months ago
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.23.5...v0.23.6


2 months ago


2 months ago


2 months ago


3 months ago


3 months ago
What's Changed New Contributors

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.22.4...v0.23.1


3 months ago


4 months ago


6 months ago
What's Changed


9 months ago


9 months ago
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.21.2...v0.21.3


10 months ago
What's Changed
  • Changing react to export css by default
  • All flavours change the comp-scoped styles to dashCase(CSS, CSS-Modules, StyledJSX) and cameCase(StyledJSX, StyledComponents).
  • Global style sheets of Plain CSS and StyledJSX don't change names, just simply appends whatever coming from UIDL (studio).
  • Adding support for component-variants we have component-overrides before. This adds another feature
  • Next with CSSModules fix for project template
  • Lots of refactoring and fixes along the way

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.20.7...v0.21.0


10 months ago


1 year ago


1 year ago
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.23...v0.20.0


1 year ago


1 year ago


1 year ago


1 year ago


1 year ago
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.16...v0.19.17


1 year ago


1 year ago
What's Changed
  • feat(image-res): project plugin to resolve local assets to map to public folder of template by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/622
  • Fix for missing styles when an element-node is copy and pasted multipole times with same key in page and it's component in component-generator-html by @JayaKrishnaNamburu

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.3...v0.19.4


1 year ago


1 year ago


1 year ago
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.18.0...v0.18.1


1 year ago
HTML Component Generator

A experimental new generator for exporting projects and components using HTML and CSS. But the generator comes with only a few features at the moment. In usual ComponentUIDL we can can define the specific details of components, Including if the component is using any external components, using

dependency: {
   type: 'local'    

But in plain html we don't have support for components yet. Yes (custom-elements) but the target is to make it a plain html with no custom-elements. A custom-elements can be a diff generator of it own :)

So, to make the syntaxes work.

const generator = createHTMLComponentGenerator()
    externals: {
      sample: SampleComponent,

await generator.generateComponent(ComponentUIDL)

The generator, clones the components in independent instances with the props passed at specific instances. Things that are no included at the moment.

  • State change behaviour
  • Event handling
  • Slots
  • Dynamic styles
  • Conditional Nodes
  • Repeat nodes

For projects that are generated using @teleporthq/teleport-project-generator-html, the generator uses a default template from parcel without routing. All the components and pages are added to their respective folders.

Feedback is highly welcome, since we want to have the HTML generator as simple as possible. And at the same time, functional. For users who want to just get their html files and serve from their static hosts.

What's Changed New Contributors

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.17.7...v0.18.0


1 year ago


1 year ago

fixes #595


2 years ago


2 years ago


2 years ago


2 years ago
  • Component scoped style-sets and variants #579
  • All the local-assets with width and height pre-defined will start using next/Image component #574.
  • Upgraded all templates, Next-10, React-17, Angular-12, Gatsby-3.5.2
Bug Fixes
  • Bug fix for passing referencedStyles along with styles for a node with aility #581
  • Switching to new syntax for styled-components for better readability and extensibility for variants
const ContactLink = styled.li`
  padding: 10px 20px;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  &:hover {
    color: red;
    border-bottom: 3px solid red;
    padding-bottom: 7px;
  • ProjectStyleSets need to be defined using the below format. Please check #579 for more details
  "secondaryButton": {
        "type": "reusable-project-style-map",
        "content": {
          "background": "red",
          "width": "auto",
          "color": "#fff",
          "border": "1px solid #fff"
  • Switch to esbuild for improving build times #577
  • Improved UIDL error validation messages.
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.16.3...v0.17.0


2 years ago


2 years ago
  • Fixes encoding for non-english characters #536
  • Added support for 'focus-within' | 'focus-visible' | 'visited' | 'checked' | 'placeholder' in element-state in addition to the existing states. Thank you @oanamun #561
  • Improved support for event validations, thank you @chavda-bhavik #560


2 years ago

#557 Un-expected behaviour in rendering when custom-tags are used in Angular and Stencil components. #495 Default branch for github pushed to main.


2 years ago
Project Generator Plugins

This release enables project-generators to chain series of plugins like component generators. This helps in re-using the default generators strategy, plugin configs and then extending their functionality using the plugins. For example

Let's take @teleporthq/teleeport-project-generator-next helps in generating a NextJS project with styled-jsx by default. But what is we need a NextJS with StyledComponents or NextJS with React-JSS. These project-plugins helps in enabling that flexibility.

const nextProjectGenerator = createNextProjectGenerator()

With nextStyledComponentsProjectGenerators we can generate NextJS projects with StyledComponents. No additional configurations and additional templates needed to maintain.

Working with Plugins
  • Using plugins we can add dependencies or devDependencies or delete any.
  • We have access to all files generated using template and from the component-generators. And we can change the content of any files with respect to our needed.
  • We cannot change the template using a project-generator-plugin. Because, the plugins are mainly designed by basing on the files and folders present in the config. If a plugin decides to change the template in middle. All the next plugins in the pipeline might start to fail.
  • Every plugin has 2 life cycle methods. runBefore and runAfter.
  • runBefore is executed right after validating the ProjectUIDL and so, we can want to add any additional plugins or remove any or even change the generators.
  • runAfter is executed after the components/pages/style sheets/routers are generated. Basically right before packing the project, so we can quickly change any configs to meet our needs.

More details and implementations of the plugins can be found here #514

Plugins that are currently released with the current release are

  • Next + CSS-Modules here
  • Next + StyledComponents here
  • Next + ReactJSS here
  • Gatsby + StyledComponents here

Out of the box, now @teleporthq/teleport-code-generator helps in generating pre-configured 14 different projects šŸŽ‰

What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.15.0...v0.16.0


2 years ago
šŸ’… Style Flavours
  • #503 (feat): Define and use design tokens in root. And use them for styles, media queries and project style sheets.

    Design tokens are here, you can deifne basic tokens which in returns converts into css-variablees in the projects generated. All, we need to do is, define a simple designLanguage field in the root of the ProjectUIDL.

    And then start using the tokens in the UIDL using


You can use these tokens in

  • Project Styles
  • Media Queries inside project styles
  • Inline Styles

Supports all style-flavours that we currently support.

  • css-variables in css / css-modules based templates (css, css-modules, styled-jsx),
  • Tokens / contants in CSS-In-JS based libraries (styled-components, jss)
šŸŒ Core
  • #507 feat(vuild): exposing vuidl for better Dx for integrations We are exporting UIDL types from @teleporthq/teleport-types like, ComponentUIDL, ProjectUIDL etc. But these are mostly used for internal implementations. The syntax for UIDL is much more simpler than this. For example, if we define a simple UIDLNode with styles.
               "content":"Hello World!"
    The generators pass this through resolving step and generates nodes. But when you use UIDLElement it throws error. Since UIDLElement expects the style to be UIDLStyleDefinitions which in return says that the style should be
    But, we don't actually need to define static nodes this way, samee thing applies to static children in UIDL. So, start using VComponentUIDL from @teleporthq/teleport-types https://repl.teleporthq.io/?uidlLink=lrvw58rmbqcxpr4dsrfrv These VUIDL helps in writing more compact and human redeable UIDL's. For more types that are exported, please check --> https://github.com/teleporthq/teleport-code-generators/blob/development/packages/teleport-types/src/vuidl.ts (@JayaKrishnaNamburu)
  • #505 refactor(validator): improved validation checks for used tokens and project style references (@JayaKrishnaNamburu)
  • #503 (feat): Define and use design tokens in root. And use them for styles, media queries and project style sheets
šŸ› Bug Fix
  • teleport-project-generator
    • #513 fix(proj-generator): fixed path mapping if the style sheet is from the same folder.
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.14.0...v0.15.0


2 years ago

Bug Fixes

  • teleport-component-generators are not working when attrs's value is "false" #492
  • Added mappings for "line-breaks" #491
  • Fixed imports issue with Angular projects #496
What's Changed New Contributors

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.13.3...v0.14.0


2 years ago


2 years ago
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.12.4...v0.13.0


2 years ago
New Features
  1. We now support project style sheet, you can define once and use them across different components and pages. For more info please check #444
  2. You can set conditions on project styles and any element inherits them, behaves according to the conditions that are specified at project level. #459
  3. Validators are now validated using a runtime type-checker instead of JSON Schema, a better way to display error messages in validating UIDL.
  1. Buttons with link will now generated as anchor tags with the button styles by default.
  2. Added semanticType for the UIDL nodes. #445
What's Changed

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.12.3...v0.12.4


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago

Some codebase updates on typescript and tslint rules and updates to the now publisher


3 years ago

A few hotfixes for links mapping and for the next project generator


3 years ago

A few fixes and new improvements for the playground integration.


3 years ago

After a few alpha releases, we finally have a stable v0.10.0 that has a bunch of new features and capabilities. With this minor version we added support for react-native both at component and project generator level + we added new options like gatsby and gridsome for project generators. Also, the publishes have be polished and are ready to be integrated in the playground project.

You can read the detailed changelog to have a better understanding of the changes involved all the way from 0.9 through all the alpha versions.


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago


3 years ago

Further updates to the UIDL structure as well as the addition of teleport-project-generator-angular to the suite


3 years ago

First alpha release for the upcoming v0.10. Includes the new package teleport-code-generator which is used by the playground as a standalone version of the entire ecosystem, refactoring throughout the packages and the new teleport-publisher-codesandbox


3 years ago

In this release, we started diversifying the frameworks we support. We added a couple of new component generators for: angular, stencil and preact and a new project generator for preact.

But most importantly, we refactored a lot of code under the hood, making the task of adding new flavors for projects and components much easier in the future.

You can read the detailed changelog to have a better understanding of the changes involved from 0.8 to 0.9.


4 years ago

Quick fix for the React component generator which was not generating the import statements.


4 years ago

In this release we finished the work for the basic infrastructure for the code generators and we now have both a generic component generator and a generic project generator, both of which have the underlying abstractions. The ecosystem can now further expand to other technologies with ease.

You can read the detailed changelog to have a better understanding of the changes involved from 0.7 to 0.8.


4 years ago

This release is a transition from a single package on npm - v0.6 to the new lerna powered setup with individual packages published on npm.

You can read the detailed changelog to have a better understanding of the changes involved from 0.6 to 0.7.

We also have an official docs site available from this point.

71 Versions

0.25.1latest1mo ago
0.25.01mo ago
0.24.01mo ago
0.23.62mos ago
0.23.52mos ago
0.23.42mos ago
0.23.32mos ago
0.23.23mos ago
0.23.13mos ago
0.23.03mos ago
0.22.44mos ago
0.22.06mos ago
0.21.79mos ago
0.21.39mos ago
0.21.010mos ago
0.20.610mos ago
0.20.31yr ago
0.20.01yr ago
0.19.221yr ago
0.19.211yr ago
0.19.191yr ago
0.19.181yr ago
0.19.171yr ago
0.19.81yr ago
0.19.41yr ago
0.19.11yr ago
0.19.01yr ago
0.18.11yr ago
0.18.01yr ago
0.17.71yr ago
0.17.61yr ago
0.17.32yrs ago
0.17.22yrs ago
0.17.12yrs ago
0.17.02yrs ago
0.16.32yrs ago
0.16.22yrs ago
0.16.12yrs ago
0.16.02yrs ago
0.15.02yrs ago
0.14.02yrs ago
0.13.32yrs ago
0.13.02yrs ago
0.12.42yrs ago
0.12.33yrs ago
0.12.23yrs ago
0.12.13yrs ago
0.12.03yrs ago
0.11.13yrs ago
0.11.03yrs ago
0.10.113yrs ago
0.10.103yrs ago
0.10.83yrs ago
0.10.73yrs ago
0.10.63yrs ago
0.10.53yrs ago
0.10.43yrs ago
0.10.23yrs ago
0.10.13yrs ago
0.10.03yrs ago
0.10.0-alpha.63yrs ago
0.10.0-alpha.53yrs ago
0.10.0-alpha.43yrs ago
0.10.0-alpha.33yrs ago
0.10.0-alpha.23yrs ago
0.10.0-alpha.13yrs ago
0.10.0-alpha.03yrs ago
0.9.03yrs ago
0.8.14yrs ago
0.8.04yrs ago
0.7.04yrs ago