Vue js как посадить на cms

Какая cms лучше всего дружит с vue.js

Подскажите пожалуйста, недавно начал осваивать vue и собственно зашел проект, который я хотел бы запилить на данном фреймвёрке. Руководство смущает момент на какую cms его лучше натянуть. Предложил сделать админку, но пока безрезультатно. Заранее спасибо.

Отслеживать
задан 11 фев 2019 в 16:23
Igor Kushtym Igor Kushtym
65 7 7 бронзовых знаков
Любой, но без костылей будет не обойтись.
11 фев 2019 в 16:24

а можно поконкретнее и какие именно костыли, просто данный проект неплохо пригружен карусельками и я ссылаюсь, что вьюшка добавит скорости за счёт реактивность.

11 фев 2019 в 16:31

CMS вряд ли из коробки дружат с Vue. Из Фреймворков — Laravel с последних версий заточена под всё это.

12 фев 2019 в 0:22

@Vladimir Gonchar спасибо, WP + WP Rest API + WP REST API Cache. попалось на глаза ещё такое сочетание, если можете прокомментировать — буду благодарен.

Создание блога с Vue.js, Nuxt и Ghost CMS

Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов. Созданный для постепенного внедрения, его реализация на существующих страницах очень проста и понятна. Даже с этими функциями Vue вполне способен запускать одностраничные приложения. Его архитектура стремится объединить лучшие черты React и Angular. Дополнительную информацию можно найти на Babacoding.

Nuxt.js — это фреймворк, который добавляет к Vue.js некоторые функции, такие как редеринг на стороне сервера (SSR) — рендеринг на стороне сервера — и генерация статического сайта (SSG) — генерация статических страниц.

SSR против SPA?

В SPA (Single-Page Application) содержимое страницы отображается после загрузки страницы, для пользователя эта стратегия не представляет проблемы, так как функционирование сохраняется.

Однако для поисковых систем (таких как Google, Bing и т. д.), которые используют роботов для чтения страниц, они не всегда ждут загрузки контента, чтобы проиндексировать страницы, как следствие, для них наш сайт имеет без содержания и, следовательно, не будут проиндексированы.

При использовании рендеринга на стороне сервера (SSR) все файлы javascript и CSS загружаются и становятся доступными в виде статических файлов. Поэтому, когда к странице обращаются, она готова, что позволяет ускорить ее загрузку и индексировать с помощью механизмов SEO (поисковая оптимизация).

Для общедоступного веб-сайта или блога желательно, чтобы он существовал в поисковых системах, по этой причине лучше принять фреймворк, реализующий SSR. Vue в качестве фреймворка для javascript, Nuxt — лучший вариант для этой цели.

CMS

Система управления контентом (CMS) — это программное обеспечение, позволяющее динамически создавать, редактировать и систематизировать контент. CMS можно разделить на две категории:

• Традиционный: контент предоставляется самим программным обеспечением, например веб-сайтом.
• Безголовый: в CMS этого типа контент доступен через API, что позволяет, среди прочего, создавать различные типы клиентов (например, SPA и мобильное приложение).

Есть несколько отличных инструментов управления контентом: WordPress, Prismic, Ghost CMS и другие.

Для этой задачи я выбрал CMS Ghost, потому что она бесплатна, имеет очень мощный текстовый редактор — идеально подходит для блога — и потому что у нее есть функции, которые также классифицируют ее как Headless CMS.

Add a headless CMS to VueJS in 5 minutes

Storyblok is the first headless CMS that works for developers & marketers alike.

• Home
• Tutorials
• Add a headless CMS to VueJS in 5 minutes

In this short article, we’ll have a look at how we can use data from the Storyblok API with a Vue.js project to create a website. At the end of this article, you will have a Vue.js Application that renders components filled with data from Storyblok.

In case you don’t know what’s a Headless CMS or what Storyblok does, please read first the Storyblok Guide .

Environment Setup

Requirements

To follow this tutorial make sure to meet these requirements:

• Basic understanding of Vue.js and Javascript
• Node.js LTS version
• An account in the Storyblok App

Create a Vue.js project

Let’s use Vue.js version 3 for this tutorial, since it is now the new default.

Following the Vue.js official installation guide, we can create our project using the official Vue project scaffolding tool: create-vue. It’s Vite based and uses all new recommendations, meaning you’ll get an incredible DX. Use it by running:

Configuration of the space

Create a new space in the Storyblok app by choosing the Create new space option. Pick a name for it .

Now, a Storyblok space with sample content has been created. If you open the Home story you will see the Visual Editor on your screen:

Understand what represents Story in our Storyblok Guide.

Enabling the Visual Editor

To see your website in Storyblok Visual Editor you need to set the default environment URL . For that, in your space open Settings > Visual Editor and set the Location field to https://localhost:3000 :

Storyblok v2 requires that your app is served via HTTPS. Luckily, this is very easily achievable by setting the following option your vite.config.js :

Connecting Vue to Storyblok

First of all, let’s install @storyblok/vue, our official SDK for Vue 3:

Then use the preview API token in src/main.js to like in this example:

From the code side, first create a pages/Home.vue component that uses the useStoryblokApi from @storyblok/vue to fetch the content:

Real-time editing with Storyblok Bridge

The power of Storyblok relies on its real-time editing experience. Play with changing the teaser headline or re-arranging the features and see the magic happen!

Luckily, @storyblok/vue makes it very easy for you. In order to make this real-time editing experience possible, your components have to be connected with Storyblok and listen to changes by its Visual Editor. Let’s take a closer look at how this is achieved:

First, to link your Vue and Storyblok components together, @storyblok/vue automatically registers a v-editable directive. If you check Feature.vue, Grid.vue, and the rest under the components folder, you’ll see you already have it there:

Wrapping Up

Congrats on reaching this point! You have a Vue 3 app fully connected to Storyblok using its API, bringing a true real-time editing experience.

Can it be even more simple? Yes. Check how to do it with Nuxt.js and find out how our @storyblok/nuxt module helps by doing some of these steps for you.

If you’re in a hurry, try yourself the live demo in Stackblitz!

WHAT’S NEXT?:

We (Storyblok) are huge fans of the Nuxt.js and the Vue.js universe. The Storyblok app is built in Vue.js and we are proud of it. As Nuxt.js is the all-in-one Vue.js meta-framework, we’ve built a Tech Hub to help you with the next steps on your Vue.js and Nuxt.js journey.

• Nuxt.js Technology Page
• Nuxt.js Multilanguage Example

Resource	Link
Vue	https://vuejs.org/
Storyblok	https://www.storyblok.com/
Live Demo	https://stackblitz.com/edit/vue-5-minutes
Storyblok Vue	https://github.com/storyblok/storyblok-vue
Storyblok APIs	https://www.storyblok.com/docs/api
Storyblok Nuxt Technology Hub	https://www.storyblok.com/tc/nuxtjs

Developer Newsletter

Want to stay on top of the latest news and updates in Storyblok?
Subscribe to Code & Bloks — our headless newsletter.

An error occurred. Please get in touch with marketing@storyblok.com

Please select at least one option.

Please enter a valid email address.

This email address is already registered.

Please Check Your Email!

Almost there! To confirm your subscription, please click on the link in the email we’ve just sent you. If you didn’t receive the email check your ’junk folder’ or perhaps try again?

Question or Feedback?

Author

Alex Jover Morales

Vue team member, passionate about communication and open source. Alex created vuedose.tips, the book «Testing Vue components with Jest» and several articles and courses on platforms like Egghead.io and Digital Ocean. He co-organizes Alicante Frontend and Vue Day Spain communities and created widely-used libraries such as tslint-config-prettier or v-lazy-image. In his free time, you’ll find him traveling, enjoying outdoor activities, and having beers with friends ����️‍♂️��

More to read

• Optimize your Storyblok images with Image Engine
• Add a Headless CMS to Next.js 13 in 5 minutes
• Manage Multilingual Content in Storyblok and Astro
• How to create a blog content structure?

Copyright © 2017-2024 Storyblok GmbH — All Rights Reserved

�� Cookie Notice

We use cookies to learn how you interact with our content, and show you relevant content and ads based on your browsing history. You can adjust your settings below. Here’s our policy.

Размещение сайта на хостинге

1. Войдите в панель управления хостингом, используя свой номер договора и пароль.

2. Перейдите в раздел Сайты.

3. Нажмите кнопку Создать сайт в правом верхнем углу.

4. Выберите домен из списка зарегистрированных по договору или введите название сайта вручную, затем нажмите кнопку Продолжить.

5. Выберите CMS из списка доступных. В качестве примера устанавливается CMS WordPress.

6. Укажите необходимые данные для автоматической установки и нажмите кнопку Продолжить.

7. На финальной странице вы сможете увидеть основные реквизиты для дальнейшей работы с сайтом.

8. Обратитесь к своему сайту по адресу http://ваш_домен/. Если домен направлен на хостинг, то вы увидите главную страницу сайта.

Продолжить работу с сайтом вы сможете в административной панели вашей CMS. Чтобы попасть в неё, нажмите на кнопку Перейти в панель управления.

Без автоматической установки CMS

1. Войдите в панель управления хостингом, используя свой номер договора и пароль.

2. Перейдите в раздел Сайты.

3. Нажмите кнопку Создать сайт в правом верхнем углу.

4. Выберите домен из списка зарегистрированных по договору или введите название сайта вручную и нажмите кнопку Продолжить.

5. Далее выберите вкладку Без CMS. Для создания базы данных активируйте слайдер Создать базу, введите название базы, имя пользователя и пароль, а затем нажмите кнопку Продолжить.

6. После создания сайта на хостинге появится каталог с его названием. Файлы следует разместить в каталоге ваш_домен/docs. Сделать это можно с помощью файлового менеджера панели управления или FTP-клиента.

7. Обратитесь к своему сайту по адресу http://ваш_домен/. Вы увидите главную страницу сайта или мастер установки CMS. При необходимости выполните инструкции мастера установки CMS.

8. В некоторых случаях может потребоваться дополнительная настройка веб-сервера для корректной работы сайта. Системные требования следует уточнить у разработчиков сайта или в документации по вашей CMS. Также рекомендуем ознакомиться с инструкциями по настройке популярных CMS.

9. Базовая настройка веб-сервера производится в разделе Управление веб-сервером панели управления хостинга. На вкладке Управление модулем PHP можно выбрать версию PHP, а также изменить основные настройки PHP.