1 line
5.4 KiB
JavaScript
1 line
5.4 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2828"],{3690:function(e,n,r){r.r(n),r.d(n,{default:()=>u,frontMatter:()=>o,metadata:()=>s,assets:()=>a,toc:()=>c,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/vue2","title":"Vue 2 SFC","description":"Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.","source":"@site/docs/languages/vue2.mdx","sourceDirName":"languages","slug":"/languages/vue2","permalink":"/docs/languages/vue2","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/vue2.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Vue SFC","permalink":"/docs/languages/vue"},"next":{"title":"WebAssembly Text","permalink":"/docs/languages/wat"}}'),i=r("5893"),t=r("65");let o={},l="Vue 2 SFC",a={},c=[{value:"Important Note",id:"important-note",level:2},{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Links",id:"links",level:2}];function d(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"vue-2-sfc",children:"Vue 2 SFC"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://vuejs.org/",children:"Vue.js"}),", The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces."]}),"\n",(0,i.jsxs)(n.p,{children:["This is the documentation for LiveCodes language support for the older ",(0,i.jsx)(n.strong,{children:"Vue 2"})," ",(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/v2/guide/single-file-components.html",children:"Single-File Component (SFC)"}),". For the latest Vue SFC head to ",(0,i.jsx)(n.a,{href:"/docs/languages/vue",children:"Vue 3 SFC documentations"}),"."]}),"\n",(0,i.jsx)(n.admonition,{type:"caution",children:(0,i.jsxs)(n.p,{children:["Please note that, officially, Vue 2 has reached ",(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/eol/",children:"End of Life (EOL)"})," on December 31st, 2023."]})}),"\n",(0,i.jsx)(n.h2,{id:"important-note",children:"Important Note"}),"\n",(0,i.jsx)(n.p,{children:"Vue 2 SFC language support in LiveCodes is different from that for Vue 3."}),"\n",(0,i.jsxs)(n.p,{children:["Unlike Vue 3, which uses the official SFC compiler (",(0,i.jsx)(n.a,{href:"https://github.com/vuejs/core/tree/main/packages/compiler-sfc",children:"@vue/compiler-sfc"}),") to compile SFC to regular JavaScript which is then sent to the result page, Vue 2 SFC support uses ",(0,i.jsx)(n.a,{href:"https://github.com/FranckFreiburger/vue3-sfc-loader",children:"vue3-sfc-loader"}),", which is loaded in the result page and the SFC is compiled on the fly in the end user's browser. This has a significant performance impact."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/FranckFreiburger/vue3-sfc-loader",children:"vue3-sfc-loader"})," is currently at version 0.8.4, which is compatible with Vue 2 version 2.6.14.\nVue 2.7 is not supported."]}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(n.p,{children:["Vue 2 SFC support includes Scoped CSS, pre-processors, JSX and ",(0,i.jsx)(n.code,{children:"src"})," imports."]}),"\n",(0,i.jsx)(n.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(n.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"vue2"})}),"\n",(0,i.jsx)(n.h3,{id:"extensions",children:"Extensions"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:".vue2"})}),"\n",(0,i.jsx)(n.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"script"})}),"\n",(0,i.jsx)(n.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/FranckFreiburger/vue3-sfc-loader",children:"vue3-sfc-loader"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"vue3-sfc-loader"}),": v0.9.5, which is compatible with Vue v2.6.14"]}),"\n",(0,i.jsx)(n.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(n.p,{children:["Using ",(0,i.jsx)(n.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/",children:"Vue 2 docs"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/v2/guide/single-file-components.html",children:"Vue 2 SFC"})}),"\n"]})]})}function u(e={}){let{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},65:function(e,n,r){r.d(n,{Z:function(){return l},a:function(){return o}});var s=r(7294);let i={},t=s.createContext(i);function o(e){let n=s.useContext(t);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(t.Provider,{value:n},e.children)}}}]); |