Vue-cli support?

[katerlouis]

I don't know if this question even makes sense; I'm just getting started with vue-cli and the architecture it provides to code stuff.

Vue-cli seems to do a lot of stuff that CodeKit does. Hot-reloading, linting, preprocessing for css, babel, build;
https://morningstar.engineering/vue-ui-a-first-look-916600d9a918

I'd like to stay in CodeKit for the whole process. With this setup it's pretty much a forked choice. I either go the vue-cli route or use CodeKit and do the whole webpack-configuration-hell-stuff myself.

So: Are there plans to integrate the vue-cli way of doing things in any way?
Or would the native bundling be enough to take this setup to CodeKit?
But what about the building of webpack then?

Please explain how this all works together etc.

[bdkjones]

Native JS bundling is coming. But I don’t have any plans to integrate vue specifically. I don’t have any experience with Vue and the folks who use large platforms like that generally LIKE having infinite control over the whole process (the Webpack configuration hell).

…

On 25 Jul 2018, at 06:23, René Eschke ***@***.***> wrote: I don't know if this question even makes sense; I'm just getting started with vue-cli and the architecture it provides to code stuff. Vue-cli seems to do a lot of stuff that CodeKit does. Hot-reloading, linting, preprocessing for css, babel, build; I'd like to stay in CodeKit for the whole process. With this setup it's pretty much a forked choice. I either go the vue-cli route or use CodeKit and do the whole webpack-configuration-hell-stuff myself. So: Are there plans to integrate the vue-cli way of doing things in any way? Or would the native bundling be enough to take this setup to CodeKit? But what about the building of webpack then? Please explain how this all works together etc. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#481>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA4jZvWFjCsMZZK5iFS8UX7-jSmKQu1rks5uKHFDgaJpZM4VgEzO>.

[luxlogica]

Vue is not used only by large-app makers. Because it's relatively small, and built on a 'progressive enhancement' philosophy, it can be loaded from CDN into your HTML page, and used to animate specific interface items on a page, without the complexity and overhead that other javascript libraries and frameworks bring. But, of course, that is just the beginning of it.

It is first and foremost a View-Layer library, not a monolithic framework such as React or Angular. There is no built-in data storage or state management layer, or high-level ajax - although these can be added via external libraries. Nevertheless, one of the most attractive propositions of Vue is the fact that it allows us to create reusable, customisable, complex interface components - such as accordions, modals, slideshows, or anything your client desires - which can be packaged into a single-file component: a self-contained file, which includes all the html, css and javascript that a user interface component needs to operate. Think of being able to drop in a single file into your project, and then being able to code your interactive accordions like this:

<accordion>
    <heading status="open">What is Vue?</heading>
    <content>Lorem ipsum dolor sit amet, consectetuer aqipiscing elit...</content>
</accordion>

There are now thousands of Vue-based reusable elements on the web, as well as entire frontend frameworks based on Vue. There are even backend frameworks and CMSs that make extensive use of Vue components. And this is where we now find ourselves: depending on the frameworks and tools you use, dealing with Vue - and single-file is pretty inevitable - and requires subscribing to the entire npm and webpack madness.

If CodeKit was able to compile .vue single-file components, it would help us enormously - and would help keep our drives free of Node and its friends...

Also refer to Issue #387.

[bdkjones]

Sure! I’m not opposed, but I need a good demo walkthrough with a project that I can use to implement the support. I don’t know anything about Vue.

…

Sent from my iPhone

On Jun 9, 2019, at 19:04, luxlogica ***@***.***> wrote: Vue is not used only by large-app makers. Because it's relatively small, and built on a 'progressive enhancement' philosophy, it can be loaded from CDN into your HTML page, and used to animate specific interface items on a page, without the complexity and overhead that other javascript libraries and frameworks bring. But, of course, that is just the beginning of it. It is first and foremost a View-Layer library, not a monolithic framework such as React or Angular. There is no built-in data storage or state management layer, or high-level ajax - although these can be added via external libraries. Nevertheless, one of the most attractive propositions of Vue is the fact that it allows us to create reusable, customisable, complex interface components - such as accordions, modals, slideshows, or anything your client desires - which can be packaged into a single-file component: a self-contained file, which includes all the html, css and javascript that a user interface component needs to operate. Think of being able to drop in a single file into your project, and then being able to code your interactive accordions like this: <accordion> <heading status="open">What is Vue?</heading> <content>Lorem ipsum dolor sit amet, consectetuer aqipiscing elit...</content> </accordion> There are now thousands of Vue-based reusable elements on the web, as well as entire frontend frameworks based on Vue. There are even backend frameworks and CMSs that make extensive use of Vue components. And this is where we now find ourselves: depending on the frameworks and tools you use, dealing with Vue - and single-file is pretty inevitable - and requires subscribing to the entire npm and webpack madness. If CodeKit was able to compile .vue single-file components, it would help us enormously - and would help keep our drives free of Node and its friends... Also refer to Issue #387. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[luxlogica]

@bdkjones I'm not sure exactly what kind of example would be helpful. I've done a little Googling, and found this example of "how to bundle single-file Vue components using Rollup":

https://github.com/kartsims/vue-customelement-bundler/tree/rollup

Does that help?

[bdkjones]

Well, how are you accomplishing this task right now outside of CodeKit? Walk me through that process.

…

On 11 Jun 2019, at 21:03, luxlogica ***@***.***> wrote: @bdkjones <https://github.com/bdkjones> I'm not sure exactly what kind of example would be helpful. I've done a little Googling, and found this example of "how to bundle single-file Vue components using Rollup": https://github.com/kartsims/vue-customelement-bundler/tree/rollup <https://github.com/kartsims/vue-customelement-bundler/tree/rollup> Does that help? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#481?email_source=notifications&email_token=AAHCGZVOUJIA44H4HVAITP3P2BYQPA5CNFSM4FMAJTHKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXPF22I#issuecomment-501112169>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHCGZX53F7SJ3IVF52QYYDP2BYQPANCNFSM4FMAJTHA>.

[treyseals]

I think what he's referring to, and correct me if I'm wrong, is compiling/bundling entire folders of .vue files.

Registering files for webpack is an absolute nightmare. I currently use a series of CodeKit hooks to compile those via bash scripting, but adding the ability (via the CK UI) to compile certain files upon change (and init hot-reload) would be a huge step in the necessity for webpack.

[luxlogica]

Right now, we cannot work with .vue files in CodeKit - not unless we instal Node, webpack, vue-cli and its friends, and then manually configure CodeKit to process 'vue' files through the bundler. It is already possible to bundle-in Vue with CodeKit using imports, but being able to use single-file components (.vue files) would be a big bonus.

The trick here is, that 'vue' files are basically normal text files, with 3 parts:

• the file is supposed to start by defining a <template></template> html element, which is the user interface item defined by the component.
• optionally, we can then have a <style></style> element, which defines any CSS styles that must be applied to the previously-defined element, and
• optionally, we can then have a <script></script> element, which defines applicable javascript.

The tricky part here is, that vue-cli allows us to use our preprocessor languages of choice, instead of vanilla HTML/CSS/JS, for these elements. So I can define the template using Pug, then the style using LESS, and the write the script using the latest Typescript...

[katerlouis]

@bdkjones what's the status here? Is this still of interest to you? How can we help you?

[kriskenyon]

Brian
I see your willingness to implement this and to be honest I am fairly new VUE user but LOVE it. The files are. Generally small and contain 3 components all can be compiled via the vue-cli node module much the same way you use components to process other files.
The format for the .vue file consists of the following

HTML Code goes here
</template

<script> JS Code goes here </script> <style> CSS goes here </style>

This is a simple carousel example

{{ item.title}}

{{ item.content}}

<script> export default { name: 'card-carousel', data() { return { currentOffset: 0, windowSize: 3, paginationFactor: 220, news: [ {title: 'Tycoon Thai', content: "Thai"}, {title: 'Ippudo', content: "Japanese"}, {title: 'Milano', content: "Pizza"}, {title: 'Tsing Tao', content: "Chinese"}, {title: 'Frances', content: "French"}, {title: 'Burma Superstar', content: "Burmese"}, {title: 'Salt and Straw', content: "Ice cream"}, ] } }, computed: { atEndOfList() { return this.currentOffset <= (this.paginationFactor * -1) * (this.items.length - this.windowSize); }, atHeadOfList() { return this.currentOffset === 0; }, }, methods: { moveCarousel(direction) { // Find a more elegant way to express the :style. consider using props to make it truly generic if (direction === 1 && !this.atEndOfList) { this.currentOffset -= this.paginationFactor; } else if (direction === -1 && !this.atHeadOfList) { this.currentOffset += this.paginationFactor; } }, } }); } </script> <style scoped> </style>

from there in your app.js file (or where ever) you would add import cardCarousel from 'vue-card-carousel.vue';

and then register the component in vue with
Vue.component(VueCarousel.name, VueCarousel);

From there you can add in html to render this whole thing.

Really having looked at your app I almost think including vue-cli may be the easy answer but I don't actually understand how pedantic Swift is so I will leave that to smarter folks like you.

[deploystudios]

Wanted to bump this thread...

@bdkjones is this of any use: compiler-sfc

Would really love to use CK with Vue so it's easier to control what is going on. Some Vue 3 tutorials are using Vite which is using rollup. Not sure if this is helpful or not.

Please save us!

[roenfeldt]

@bdkjones any chances we could get native Vue SFC (single-file component) compilation support in CodeKit?

[bdkjones]

Sure! The issue is that I don't use Vue, so I don't have any expertise. I'd need someone to put together a simple walkthrough of what the process entails and a VERY simple sample project that I can follow to implement it.