From Component Architecture to Code Exporting

PreVue allows users to conceptualize and visualize component architecture. With its rich feature set, you can:

• Build components, visualize UI, and preview the associated code
• Set up different routes and views for each project
• Establish parent-child component relationships
• View application hierarchy in tree format
• Save and open projects, ensuring that completed work is preserved
• Export component architecture as a Vue application with default Vite settings

Getting Started

Adding Views

Select an existing view from the View Creator dropdown, or enter a new view name. Your custom view will automatically save any components created on that specific view. Click the ‘Tree’ icon in the navigation bar to see your application’s hierarchy.

Adding Components

To add components, enter a component name in the Component Creator field and select HTML elements. Drag elements to rearrange their order and click ‘add component’ to include it in your design.

Editing Components

Double-click an element to open the modal view where you can add additional elements. Drag elements to nest them, establishing parent-child relationships through the dropdown menu when creating or editing components.

Saving, Opening, and Exporting Projects

If signed in with GitHub, click the ‘Save Project’ icon to save your work. Retrieve past projects with ‘Open Project’ or export your awesome project as a new Vue application!

Understanding the Code Exporting

When you export your design, PreVue generates a directory structure for the Vue application that includes:

• src/
• assets/
• App.vue
• components/ containing all user-created components
• views/ with home and user-created routes

Running Your Own Local Version

Setup
Coming soon!

Built With

PreVue is powered by an impressive set of technologies:

• Express
• Jest
• MongoDB
• Mongoose
• Node.js
• SuperTest
• Vite
• Vue Router
• Vue Test Utils
• Vue.js
• Vuex
• Vuetify

Changelog

PreVue 3.0 Updates:

• OAuth integration with GitHub
• Full CRUD functionality for prototypes
• Implementation of hierarchical relationships
• Redesign for seamless user experience
• Realistic rendering of components
• Delete and Undo functionalities

PreVue 2.0 Updates:

• Launched as a web application
• TypeScript integration
• Backend built with Node/Express
• General UI/UX enhancements

Contributing to PreVue

We encourage submissions for bugs or ideas for enhancements. Feel free to fork the repository and submit pull requests. For updates, follow PreVue on LinkedIn.

Troubleshooting

If you encounter issues while using PreVue, here are some troubleshooting tips:

• Make sure you’re connected to the internet to save and synchronize your work.
• If the application isn’t responding, refresh your browser or try clearing the cache.
• For component issues, check if the parent-child relationships are correctly established.
• Check for any typos in view or component names which may lead to errors.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.